KnockoutJS自定义绑定无法在可观察到的更改上触发更新回调

Question

当我的可观察数组发生更改时，不会触发更新回调。 请帮忙。 这是我的自定义绑定：

ko.bindingHandlers.selectizeBinding ={
    update: function(element, valueAccessor){
        var value = valueAccessor();
        var ords = ko.unwrap(value);
        alert(ords);
    },
    init: function(){},
}

我的ViewModel是这样的：

function poReceivingModel(){
    var self = this;
    self.order_id = ko.observable();
    self.opts = ko.observableArray(); 
    self.getOptions = ko.computed(function(){
        var odr_id = ko.unwrap(self.order_id)
        var url = '/po/order_products_asjson/' + String(odr_id)
            if(typeof(odr_id) != 'undefined'){
                $.ajax({
                    url: url,
                    dataType: 'json',
                    async: false,
                    success: function(data) {
                        self.opts = data.options;
                    }
                });
            }
        return self.opts;
    });
}

而html是：

<select data-bind="value: order_id">
    <option value="1">option1</option>
    <option value="2">option2</option>
<select data-bind="selectizeBinding: opts"</select>

当'self.opts'可观察的数组更改时，我无法触发更新。 请帮我。 “ init”和“ update”回调在开始时被调用一次。 之后，当我观察到更改时，不会调用更新回调。

Answer 1

JSFiddle-使用setTimeout模仿ajax调用。

您没有在ajax回调中正确设置“ opts”。 需要使用功能进行设置。

function poReceivingModel(){
    var self = this;
    self.order_id = ko.observable();
    self.opts = ko.observableArray(); 
    self.getOptions = ko.computed(function(){
        var odr_id = ko.unwrap(self.order_id)
        var url = '/po/order_products_asjson/' + String(odr_id)
            if(typeof(odr_id) != 'undefined'){
                $.ajax({
                    url: url,
                    dataType: 'json',
                    async: false,
                    success: function(data) {
                        self.opts(data.options);
                    }
                });
            }
        return self.opts;
    });
}

您也有一些格式错误的HTML

<select data-bind="value: order_id">
    <option value="1">option1</option>
    <option value="2">option2</option>
</select>

<select data-bind="selectizeBinding: opts"</select>