敲除数据绑定动态生成的元素

Question

怎样才能使knockout数据绑定对动态生成的元素起作用？例如,我在div中插入一个简单的html选择菜单,并希望使用knockout选项绑定填充选项.这就是我的代码:

$('#menu').html('<select name="list" data-bind="options: listItems"></select>');

但这种方法不起作用.有任何想法吗？

Answer 1

如果在绑定viewmodel后动态添加此元素,则它将不在viewmodel中,并且不会更新.你可以做两件事之一.

1. 将元素添加到DOM并通过ko.applyBindings();再次调用重新绑定它
2. 或者从头开始将列表添加到DOM,并将viewmodel中的选项集合留空.Knockout将不会呈现它,直到您稍后向选项添加元素.

Answer 2

淘汰赛3.3

ko.bindingHandlers.htmlWithBinding = {
          'init': function() {
            return { 'controlsDescendantBindings': true };
          },
          'update': function (element, valueAccessor, allBindings, viewModel, bindingContext) {
              element.innerHTML = valueAccessor();
              ko.applyBindingsToDescendants(bindingContext, element);
          }
    };

上面的代码片段允许您使用"htmlWithBinding"属性动态注入html元素.然后还评估添加的子元素......即它们的数据绑定属性.

Answer 3

重写html绑定代码或创建一个新的.因为html绑定阻止了动态html中的"注入绑定":

ko.bindingHandlers['html'] = {
  //'init': function() {
  //  return { 'controlsDescendantBindings': true }; // this line prevents parse "injected binding"
  //},
  'update': function (element, valueAccessor) {
    // setHtml will unwrap the value if needed
    ko.utils.setHtml(element, valueAccessor());
  }
};