javascript - Knockout.js - 在通过可观察对象设置值时防止更改事件绑定(bind)触发

Question

我有一个具有以下绑定(bind)的 DropDownList:

<select data-bind="value: DropDownValue, event: { change: OnChange }">
    <option value="1">Val 1</option>
    /* and more */
</select>

当用户从 DropDownList 中选择不同的值时，会正确触发 OnChange 事件。

当使用 viewModel.DropDownValue(1) 更新可观察属性的值时，也会触发该事件。

我想要实现的是，仅当用户通过 UI 设置值时才触发更改事件。

通过observable更新值时是否可以阻塞change事件？

这是 JSFiddle 示例:https://jsfiddle.net/5ex5j7jL/3/

Answer 1

看起来一种方法是使用 the isTrusted property event 对象(true 当事件由用户操作生成时，false 当由脚本生成时):

self.OnChange = function(viewModel, event) {
  if(event.isTrusted) {
    console.log("from dropdown");
    return;
  } else {
    console.log("NOT from dropdown");
    // do something
  }
};

参见 updated fiddle

编辑

当然，如果你想阻止用户通过 UI 更改下拉列表，你必须实现一些王者机制:

function ViewModel() {

    var self = this;

    self.DropDownValue = ko.observable();
    self._original = null;

    self.OnChange = function(viewModel, event) {
      if(event.isTrusted) {
        // rollback the viewModel value to the old one
        viewModel.DropDownValue(self._original)
        return false
      } else {
        // keep a reference to the latest value for later rollback
        self._original = ko.unwrap(viewModel.DropDownValue)
      }
    };
};

查看此 updated fiddle