更新模型不更新视图

我使用的是什么，我相信是普遍接受的ko.bindingHandler.select2：更新模型不更新视图

ko.bindingHandlers.select2 = { 
    init: function (element, valueAccessor) { 
     $(element).select2(valueAccessor()); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).select2('destroy'); 
     }); 
    }, 
    update: function (element) { 
     $(element).trigger('change'); 
    } 
};

然而，这似乎有几个问题。在这个问题中，我想找到如何在对模型进行更改时创建视图更新的答案。

我创建了一个演示此问题的jsFiddle。我有一个简单的setTimeout()函数，它在0.25秒后设置模型的selectedValue，以模拟类似于通过Ajax调用的模型加载数据的行为。在示例中，使用Select2时下拉值不会更新，但对于正常下拉菜单看起来工作得很好。

完整的解决方案： 我更新的自定义绑定现在看起来是这样......

ko.bindingHandlers.select2 = { 
init: function (element) { 
    $(element).select2({}); 

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $(element).select2('destroy'); 
    }); 
}, 
update: function (element, valueAccessor) { 
    var value = valueAccessor(); 
    var valueUnwrapped = ko.utils.unwrapObservable(value); 
    $(element).val(valueUnwrapped).trigger('change'); 
}

};

在我的HTML中，我现在将值传递给自定义绑定。

data-bind="select2: selectedValueS2

来源

2013-05-30 Justin

好的，似乎我能够找出问题所在。如果更新下拉值当值发生变化，然后调用触发，它会工作：

$(element).val(value()).trigger('change');

http://jsfiddle.net/tkirda/Mmuvx/5/

来源

2013-05-30 19:50:33

不知道我理解这个问题。一切似乎按预期工作。 setTimeout更改值，然后UI更新。 –

对不起，以前的评论是看错了小提琴。但是你的小提琴实际上是摆脱了OP使用的特殊select2下拉菜单。你没有解决这个问题，你只是完全删除了插件。 – Tyrsius

他的小提琴包含'select2'插件，顺便说一句。查看外部资源。 – Tyrsius

更新模型不更新视图

回答

相关问题