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，如果我使用浏览器 Inspektor 查看对象，则data-bind实际上是 DOMelement 的属性，但viewmodel.title()的内容永远不会显示。

Answer 1

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

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

Answer 2

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

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

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

敲除数据绑定到自生成的DOM

2 个答案: