javascript - knockout 数据绑定(bind)到自行生成的 DOM

Question

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

例如:

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);
}

因此，如果我使用浏览器Inspektor查看该对象，则按下该按钮后将创建div，并且数据绑定(bind)实际上是DOM元素的属性，但 viewmodel.title() 的内容永远不会显示。

Answer 1

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

您的工作是操纵 View 模型。 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>