敲除数据绑定到自生成 DOM

Question

我在初始化 viewmodel 后尝试将数据绑定应用到自生成的 DOM 元素。但这似乎行不通，所以我有一个问题：是否有可能让这个数据绑定工作 （也许有某种更新功能） 或没有。

例如：

html:

<div id="content">
    <button onclick="create">create DOM ele</button>
</div>

javascript:

function MyViewModel() {
    var self = this;
    self.title = ko.observable('TITLE');
    }

ko.applyBindings(new MyViewModel());

function create() {
    div = document.createElement('div');
    div.setAttribute('data-bind', 'title()');

    document.getElementById("content").appendChild(div);
}

所以 div 将在按下该按钮后创建，如果我用浏览器查看对象，数据绑定实际上是 DOMelement 的一个属性Inspektor，但 viewmodel.title() 的内容永远不会显示。

Answer 1

数据绑定属性在 applyBindings 为运行时处理，这在您触发 create() 之前很久就已完成。您可以运行在 create() 期间在创建期间添加到页面的元素的子树上应用绑定。

function create() {
  div = document.createElement('div');
  div.setAttribute('data-bind', 'title()');

  ko.applyBindings(
    new MyViewModel(),
    div;
  )
}

Answer 2

你的做法是错误的。您不应该创建 DOM 元素，这就是 Knockout 的用途。

你的工作是操纵视图模型。淘汰赛的工作是操纵 DOM.

function MyViewModel() {
  var self = this;

  self.title = ko.observable('TITLE');
  self.children = ko.observableArray();

  self.create = function () {
    self.children.push({
      name: "Child " + self.children().length
    });
  }
}

ko.applyBindings(new MyViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="content">
    <button data-bind="click: create">create item</button>
    <div data-bind="foreach: children">
      <div data-bind="text: name"></div>
    </div>
</div>

<hr>
<pre data-bind="text: ko.toJSON($root, null, 2)" style="font-size: small;"></pre>

敲除数据绑定到自生成 DOM

knockout data-bind to self-generated DOM

javascript

jquery

knockout.js