选择不适用于动态敲除选项绑定

Question

我正在使用 knockout.js 和 jquery。 availableBrands 定义为：

self.availableBrands = ko.observableArray();

我的ajax请求方法是：

self.loadBrands = function () {
                $.ajax({
                    url: '/api/Electronic/GetBrands',
                    dataType: "json",
                    contentType: "application/json",
                    cache: false,
                    type: 'POST',
                    success: function (data) {
                        $.each(data,function (i,item) { self.availableBrands.push(item) });
                    },
                    error: function (jqXHR, status, thrownError) {
                        toastr.error("failed to load Brands.Please refresh page and try again", "Error");
                    }
                });
            }

我收到的数据是：

更新： 我正在使用与 selectize 插件绑定的淘汰选项：

<select id="select-category" class="demo-default" data-bind="options: availableBrands,
                       value: selectedBrand,
                       optionsCaption: 'Choose brand...'"></select>

而 js 是：

$('#select-category').selectize({
                create: true,
                sortField: {
                    field: 'text',
                    direction: 'asc'
                },
            });

现在 select 只显示我硬编码的那些选项。它不显示通过 ajax.

加载的选项

更新二：

在我写的loadBrands函数中 self.availableBrands.push('ghi'); ghi 显示在 select 选项中。但是通过ajax加载的数据没有显示。

我将 ajax 成功更改为：

success: function (data) {
                        $.each((data), function (i, item) { console.log(item); });
                    },

控制台数据如下图

为什么通过 ajax 加载的数据没有显示在 select 中？

Answer 1

它应该会按预期工作，确保您正确引用 jquery。

viewModel:

var ViewModel = function (data) {
    var self = this;
    self.list = ko.observableArray();
    $.each(data, function (i,item) {
        self.list.push(item)
    });
}
ko.applyBindings(new ViewModel([11, 22, 33]));

检查样本 here 以供参考

在您的这种情况下不需要使用 $.each 检查 here。

更新使用 Selectize 插件检查 here .

尝试在加载选项后 ajax 成功应用 .selectize。

Answer 2

数据不是 jQuery 对象。您可以只使用常规 javascript forEach 语句

data.forEach(function(item){ self.availableBrands.push(item)})

另外 self 可能未在回调中正确设置。您可以执行以下操作

self.loadBrands = function () {
  var self=self;
  $.ajax({

选择不适用于动态敲除选项绑定

selectize not working with dynamic knockout options binding

jquery

select

knockout.js

selectize.js