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

时间:2015-06-11 21:41:02

标签: javascript knockout.js

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

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'回调在开始时调用一次。之后,当我获得可观察的更改时,不会调用更新回调。

1 个答案:

答案 0 :(得分:1)

JSFiddle - 使用setTimeout来模仿ajax调用。

你没有设置&#34;选择&#34;正确地在ajax回调中。需要使用函数进行设置。

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>