Question

我有一个我在ajax应用程序中创建的视图模型。当我渲染我的第一段html时，会调用ko.applyBindings（）。后来我做了第二次ajax调用来渲染html的另一部分并绑定到同一个视图模型。但是，因为当我第一次调用ko.applyBindings（）时，第二个ajax中的html元素不存在，那么当我的第二个html部分被检索时，data-bind不起作用。

这是一个非常简单的示例，其中第一个复选框正确绑定。然后content2将通过后续的ajax调用加载，并且复选框无法绑定

<div id='container'>
    <div id="content1"> <span>Opt In</span>
        <input data-val-required="field is required." id="cbOptIn" name="OptIn" type="checkbox" data-bind="checked: OptIn"/>
    </div>    
</div



var ViewModel = function () {
    var self = this;
    self.OptIn = ko.observable(false);
    self.OptIn2 = ko.observable(false);
}

var appVM = new ViewModel();
ko.applyBindings(appVM);

appVM.OptIn(true);

var content2 = document.createElement('div');
content2.id = 'content2';
content2.innerHTML = '<span>Opt In2</span><input data-val-required="field is required." id="cbOptIn2" name="OptIn2" type="checkbox" data-bind="checked: OptIn2"/>';
document.getElementById('container').appendChild(content2);

appVM.OptIn2(true);

我也试图通过创建两个单独的视图模型来解决这个问题，但后来我得到了

"You cannot apply bindings multiple times to the same element."

Answer 1

我假设您的精简版本在功能上与您的实际情况不同，并且您正在使用jQuery load（）调用来将片段带入。如果是这种情况，您可以使用几个函数用于重新应用绑定：ko.dataFor()，ko.cleanNode()和ko.applyBindings()。

如果要将片段加载到元素中：

element.load('path/to/fragment.html', function() {
  // do stuff
});

并且该元素或其他一些父元素已绑定到视图模型，您可以使用如下函数重新应用绑定：

var reapplyBindings = function(element) {
  // grab the viewmodel that has been applied to this element
  var viewModel = ko.dataFor(element);

  // if the viewmodel exists, clean the node and re-apply the viewmodel
  // to the element (and all of it's children)
  if(viewModel) {
    ko.cleanNode(element);
    ko.applyBindings(vm, element);
  }
}

现在，要使用此功能：

element.load('path/to/fragment.html', function() {
  reapplyBindings(element);
  // do stuff you were doing before
});

这是有效的，因为即使您可能没有将viewmodel显式应用于正在加载的元素，knockout仍然可以从DOM的上方获取viewmodel。

这种方法唯一真正的警告是cleanNode功能;它会删除任何事件处理程序，因此需要重新应用它们（除非你将它们附加到父元素，在这种情况下你很好）。

KnockoutJS Binding

1 个答案: