Question

我是knockoutjs的新手，并尝试学习它并从许多不同的网站上阅读代码示例。我有一段代码用于与knockoutjs绑定表数据，但我不能正确理解绑定代码。所以在这里我将发布代码。所以有人可能帮我理解代码。

这里是完整代码

<script type="text/html" id="person">
  <tr>
    <td data-bind="text: $root.name"></td>
    <td data-bind="text: $parent.name"></td>
    <td data-bind="text: $data.name"></td>
  </tr>
  <!-- ko template: { name: 'person', foreach: children } --><!-- /ko -->
</script>

<table>
  <tr>
    <th>$root</th>
    <th>$parent</th>
    <th>$data</th>
  </tr>
  <!-- ko template: { name: 'person', data: mainPerson } --><!-- /ko -->
</table>

th, td { padding: 10px; border: 1px solid gray; }

var Person = function(name) {
  var self = this;
  self.name = ko.observable(name);
  self.children = ko.observableArray([]);
}

var ViewModel = function() {
  var self = this;
  self.name = 'root view model';
  self.mainPerson = ko.observable();
}

var vm = new ViewModel(),
    grandpa = new Person('grandpa'),
    daddy = new Person('daddy'),
    son1 = new Person('marc'),
    son2 = new Person('john');

vm.mainPerson(grandpa);
grandpa.children.push(daddy);
daddy.children.push(son1);
daddy.children.push(son2);

ko.applyBindings(vm);

我不清楚以下绑定代码

<script type="text/html" id="person">
  <tr>
    <td data-bind="text: $root.name"></td>
    <td data-bind="text: $parent.name"></td>
    <td data-bind="text: $data.name"></td>
  </tr>
  <!-- ko template: { name: 'person', foreach: children } --><!-- /ko -->
</script>

<table>
  <tr>
    <th>$root</th>
    <th>$parent</th>
    <th>$data</th>
  </tr>
  <!-- ko template: { name: 'person', data: mainPerson } --><!-- /ko -->
</table>

指导我理解上面的约束。

这是

的内容

jsfiddle link http://jsfiddle.net/tridip/03tx96dm/

感谢

Answer 1

该属性的<script>段告诉您哪个模板用于显示和绑定您的数据。在淘汰赛中，模板使用text/html类型的id元素定义。该模板由其person属性引用。在这种情况下foreach。

children部分基本上告诉人们将此模板应用于集合mainPerson中的每个元素（或第二次使用中的单个对象{{1}}）。

本质上，此示例使用的是引用自身的模板。这将允许您不断地任意深度嵌套元素，并且敲除将使用您最少的代码跟踪所有内容。

用敲除js绑定数据的特定方式

这里是完整代码

我不清楚以下绑定代码

1 个答案: