自定义绑定，带有绑定和初始化 - knockout.js

Question

我们正在对由多个视图模型组成的 SPA 使用挖空，为了处理可见的视图，我们已经包装了我们在 with bindings 中绑定“子”视图模型的 div。

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

当我们有一个基于 jqdialog binding 的绑定时，这会给我们带来问题，并且在每次初始化时都会创建一个新对话框并将其附加到我们的 DOM，但我们无法知道何时应该删除它。

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

简单视图：

<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 中。当然，这会导致重新创建绑定并再次触发 init 函数。

如果您只想隐藏/显示，请改用可见绑定。

如果你这样做：

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

您会在页面加载时看到绑定初始化，并且在显示/隐藏时不会再次初始化。见here。