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

我是knockoutjs新手，正在尝试学习它，并阅读许多不同网站的代码示例。我得到了一段使用knockoutjs绑定表数据的代码，但我没有正确理解绑定代码。所以我将在这里发布代码。因此，如果可能的话，请有人帮助我理解代码

这是完整的代码

$root
$parent
$data
th，td{填充：10px；边框：1px实心灰色；}
var Person=函数（名称）{
var self=这个；
self.name=ko.observable（名称）；
self.children=ko.observearray（[]）；
}
var ViewModel=函数（）{
var self=这个；
self.name='根视图模型'；
self.mainPerson=ko.observable（）；
}
var vm=new ViewModel（），
爷爷=新人（“爷爷”），
daddy=新人（“daddy”），
son1=新人（“marc”），
son2=新人（“约翰”）；
主要人物（爷爷）；
爷爷。孩子们。推（爸爸）；
爸爸。孩子们。推（son1）；
爸爸。孩子们。推（son2）；
ko.应用绑定（vm）；

我不清楚下面的绑定代码

$root
$parent
$data

请引导我理解以上绑定

这是什么

JSFIDLE链路

---

谢谢

属性的

名称：“person”

部分告诉knockout使用哪个模板来显示和绑定数据。在knockout中，模板由类型为

text/html

的

元素定义。模板由其

id

属性引用。在这种情况下，

person

foreach

部分基本上是告诉knockout将此模板应用于集合

子对象中的每个元素（或第二次使用中的单个对象
mainPerson
）

本质上，这个示例使用的是一个引用自身的模板。这将允许您不断地嵌套任意深度的元素，而knockout将以最少的代码跟踪所有内容。
您刚刚阅读了关于模板绑定的文档：以及无容器控制流语法@nemesv您能告诉我，当我们可以使用knockoutjsforeach绑定。人们使用模板绑定有什么原因吗？基本上，“foreach模式”中的模板绑定与foreach binding做的是相同的。但是，在foreach绑定的情况下，您的项“模板”直接内联到您具有绑定的HTML中。如果是模板绑定的情况，则您的模板可以是中心位置，可以延迟加载，等等。因此，如果要重用模板，则需要将模板绑定与foreach选项一起使用。命名模板有点不稳定，内联模板是100%可靠的。@PeterWone你说命名模板有点古怪，但你没有解释为什么……如果可能的话，给出一个详细解释相同内容的链接。谢谢
<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>