更新模型不更新視圖

我使用的是什麼，我相信是普遍接受的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

更新模型不更新視圖

回答

相關問題