Javascript 更新模型不会更新视图

我使用的是公认的

ko.bindingHandler。选择2

：

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');
  }
};

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

我创建了一个演示该问题的示例。我有一个简单的

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

---

好吧，看来我能找出问题所在。如果在值更改时更新下拉列表值，然后调用触发器，它将工作：

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

---

我不确定我是否理解这个问题。一切似乎都按计划进行。setTimeout更改值，然后更新UI。很抱歉，前面的评论看错了小提琴。但是你的小提琴实际上是在摆脱OP使用的特殊select2下拉菜单。你没有解决问题，只是完全删除了插件。他的提琴包含

select2

插件，顺便说一句。请查看外部资源。更新的提琴没有使用select2插件呈现下拉列表？看起来它现在正按照你的要求工作。请看：最初我没有注意select2插件的功能。