我正在学习KnockoutJS,但我不了解$root$parent用法之间的区别。 请参阅此jsfiddle或以下代码:

<div data-bind="foreach:mainloop">
    $data Value: <span data-bind="text:$data.firstName"></span> 
                  <span data-bind="text:$data.lastName"></span> --(1)

    <br/>
    $parent Value: <span data-bind="text:firstName"> </span> 
                   <span data-bind="text:$parent.lastName"></span>
    <br/>
    $root Value: <span data-bind="text:firstName"></span>
                 <span data-bind="text:$root.lastName"></span>
    <br/>
        <hr/>
</div>
var mainLoopModel = function () {
    var self = this; // Root Level scope
    self.mainloop = ko.observableArray([{
        'firstName': 'jhon'
    }, {
        'firstName': 'sam'
    }]);
    self.lastName = ko.observable('peters');
    /*if you remove $data before lastName in note (1) you get undefined error because because mainloop dont have lastName root model has lastName so you have to access using parent or higher level */
}

ko.applyBindings(new mainLoopModel());

在上面的代码中, $root$parent都用于相同目的:引用外部作用域变量。 我只想知道$root$parent用法之间有什么区别? 如果是,那么请以正确使用的好例子帮助我理解。

===============>>#1 票数:50 已采纳

它们相似但不同:

  • $root是通过ko.applyBindings应用于DOM的视图模型;
  • $parent指直接外部范围;

或者,从$data的角度来看:

树可视化

或者,用相关文档的话

  • $parent :这是父上下文中的视图模型对象,即当前上下文外部的视图模型对象。

  • $root :这是根上下文(即最顶层的父上下文)中的主视图模型对象。 通常是传递给ko.applyBindings的对象。 它等效于$parents[$parents.length - 1]

  • $data :这是当前上下文中的视图模型对象。 在根上下文中,$ data和$ root是等效的。

如果您将视图模型嵌套了多个级别,则只会看到实际的区别,否则它们将构成同一事物。

证明它的好处很简单:

 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); 
 th, td { padding: 10px; border: 1px solid gray; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <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> 

$root始终相同。 $parent不同,这取决于您嵌套的深度。

  ask by Mou translate from so

未解决问题?本站智能推荐: