knockout.js - 自定义绑定(bind)，带有绑定(bind)和 init - knockout.js

Question

我们正在对由多个 View 模型组成的 SPA 使用 knockout ，为了处理可见的 View ，我们将 div 包装在 with bindings 中绑定(bind)“子” View 模型的位置。 。

我们看到的问题是，当切换 View 可见性时，每次都会执行其中的自定义绑定(bind)(初始化和更新)。

当我们有一个基于此 jqdialog binding 的绑定(bind)时，这会给我们带来问题。在每次初始化时都会创建一个新对话框并将其附加到我们的 DOM 中，但我们没有简单的方法知道何时应将其删除。

或多或少这是一个关于我们是否应该重新安排架构的这一部分或者我们的绑定(bind)中是否缺少某些内容的问题。

简单 View :

<div id="view">
  <button data-bind="click: on">On</button>
  <button data-bind="click: off">Off</button>

  <div data-bind="with: visible">
    <span data-bind="foo: ''">foo</span>
    visible
  </div>

</div>​​​​​​​​​​

Js:

ko.bindingHandlers.foo= {
  init: function() {
    alert("init");
  },
  update: function() {
    alert("update");
  }
}


var vm =(function() {
  var self = this;
  self.visible = ko.observable(false);

  self.on = function() { self.visible(true); };
  self.off= function() {self.visible(false); };

})();

ko.applyBindings(vm, document.getElementById("view"));

​

小fiddle粗略地显示我们的错误。

Answer 1

您的问题是您没有切换可见性。当您使用 with 时，您每次都会删除相同的元素并将其重新插入到 DOM 中。当然，这会导致重新创建绑定(bind)并再次触发 init 函数。

如果您只想隐藏/显示，请使用可见绑定(bind)。

所以如果你这样做:

<div data-bind="visible: visible">
    <span data-bind="foo: ''">foo</span>
    visible
</div>

您会看到绑定(bind)在页面加载时初始化，并且在显示/隐藏时不会再次初始化。请参阅here .