您可以调用ko.applyBindings绑定部分视图吗?


257

我正在使用KnockoutJS并具有主视图和视图模型。我想要一个对话框(jQuery UI)弹出另一个视图,该视图将绑定到一个单独的子视图模型。

对话框内容的HTML使用AJAX检索,因此我希望能够ko.applyBindings在请求完成后调用,并且我希望将子视图模型绑定到对话框div中通过Ajax加载的HTML的一部分。

这实际上可行吗,还是在页面最初加载后调用ko.applyBindings一次时需要加载所有视图和视图模型?

Answers:


430

ko.applyBindings 接受第二个参数,该参数是要用作根的DOM元素。

这将使您可以执行以下操作:

<div id="one">
  <input data-bind="value: name" />
</div>

<div id="two">
  <input data-bind="value: name" />
</div>

<script type="text/javascript">
  var viewModelA = {
     name: ko.observable("Bob")
  };

  var viewModelB = {
     name: ko.observable("Ted")
  };

  ko.applyBindings(viewModelA, document.getElementById("one"));
  ko.applyBindings(viewModelB, document.getElementById("two"));
</script>

因此,您可以使用此技术将viewModel绑定到加载到对话框中的动态内容。总体而言,您只需要注意不要applyBindings在同一元素上多次调用,因为您将获得多个事件处理程序。


17
如果您还希望在将来的某个时候删除绑定,则可以调用ko.cleanNode(document.getElementById("one")清理或ko.removeNode(document.getElementById("one")清理并从DOM中删除节点。
Michael Berkompas 2012年

7
请注意,cleanNode并且removeNode不会删除事件处理程序,因此请谨慎使用。在某些情况下,最好在这些区域上使用templatewith绑定,以便呈现新元素。
RP Niemeyer 2012年

7
当前是KO中缺少的东西。我们不打算让人们“重新绑定”版块。但是,如果引用了KO,则确实使用jQuery附加事件,因此您可以$(element).unbind();删除所有处理程序。
RP Niemeyer 2012年

5
这些功能(applyBindings,cleanNode,removeNode)在哪里记录?我在strockoutjs.com上找不到它们的功能签名。
EricP

2
如果这在文档中很容易找到,那会很好。我什至都没有提到它。
特拉维斯·考夫曼

61

尽管Niemeyer的答案是对该问题的更正确答案,但您可以执行以下操作:

<div>
  <input data-bind="value: VMA.name" />
</div>

<div>
  <input data-bind="value: VMB.name" />
</div>

<script type="text/javascript">
  var viewModels = {
     VMA: {name: ko.observable("Bob")},
     VMB: {name: ko.observable("Ted")}
  };

  ko.applyBindings(viewModels);
</script>

这意味着您不必指定DOM元素,甚至可以将多个模型绑定到同一元素,如下所示:

<div>
  <input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>

4
您还可以使用“ with”将页面的区域分配给各个模型
-data

3
@flamingpenguin:是的,但with并不便宜,请参阅:链接
mhu 2012年

7

我设法在运行时将自定义模型绑定到元素。代码在这里:http : //jsfiddle.net/ZiglioNZ/tzD4T/457/

有趣的一点是,我将data-bind属性应用于未定义的元素:

    var handle = slider.slider().find(".ui-slider-handle").first();
    $(handle).attr("data-bind", "tooltip: viewModel.value");
    ko.applyBindings(viewModel.value, $(handle)[0]);

遇到ko 2.3的麻烦时,上面的代码在我应用全局ko.applyBindings()时调用的客户处理程序中。因此,现在出现错误“您不能多次将绑定应用于同一元素。”。我仍在尝试找出导致错误的原因。我们不能多次将绑定应用于同一个变量,而每次绑定到不同的元素吗?
ZiglioUK

这是无法使用ko 2.3的版本:jsfiddle.net/ZiglioNZ/tzD4T/458
ZiglioUK 2013年

在对部分视图调用applyBinding之前添加对ko.cleanNode()的调用似乎无济于事:jsfiddle.net/ZiglioNZ/tzD4T/459
ZiglioUK 2013年

解决:我什至不需要调用applyBindings!
ZiglioUK 2013年

香港专业教育学院刚刚编辑了knockoutjs源代码,并注释了该函数扭曲的部分“您不能多次将绑定应用于同一元素。”,现在一切正常,我知道这是一个肮脏的解决方案,但对我的库来说是新的,因此我不知道如何不对我的问题多次使用它。
Geomorillo

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.