Question

我们正在使用基于多个视图模型的SPA的淘汰赛来处理我们已经包含了div的哪个视图，我们将这些视图绑定到＆＃39; sub＆＃39;查看with bindings中的模型。

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

当我们有一个基于此jqdialog binding的绑定时，这会给我们带来问题，并且在每个init上创建一个新对话框并将其附加到我们的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。

自定义绑定，带绑定和＆amp; init - knockout.js

1 个答案: