Knockout学习笔记之二（$root，$parent及$data的区别）

时间：2023-03-08 16:34:04

以下是我从Google上找到的一个例子，非常生动形象，我修改了部分代码，具体内容如下：

对于$root 与$parent的区别：

  • $root refers to the view model applied to the DOM with ko.applyBindings;

译：$root 是指ViewModel所应用于ko.applyBindings时所使用的DOM;

  • $parent refers to the immediate outer scope;

　　  译：$parent 是指当前DOM元素直接的外部父类（只有一层）;

Or, visually, from $data's perspective:

Knockout学习笔记之二（$root，$parent及$data的区别）

Or, in words of the relevant documentation:

  • $parent: This is the view model object in the parent context, the one immeditely outside the current context.
  • $root: This is the main view model object in the root context, i.e., the topmost parent context. It’s usually the object that was passed to ko.applyBindings. It is equivalent to $parents[$parents.length - 1].

对于三者的区别（$root，$parent及$data）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

    <title></title>

    <script type="text/javascript" src="knockout-3.4.0.js"></script>

    <style>

        th, td {

            padding: 10px;

            border: 1px solid gray;

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            vm.mainPerson(grandpa);

            grandpa.children.push(daddy);

            daddy.children.push(son1);

            daddy.children.push(son2);

            ko.applyBindings(vm);

        }

        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;

        vm= new ViewModel(),

        grandpa = new Person('grandpa'),

        daddy = new Person('daddy'),

        son1 = new Person('marc'),

        son2 = new Person('john');

    </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>

</head>

<body>

</body>

</html>

具体页面呈现：

Knockout学习笔记之二（$root，$parent及$data的区别）

The $root is always the same. The $parent is different, depending on how deeply nested you are.

译：$root经常是相同的，而$parent是不同的，而这种不同主要取决于你嵌套的深度。

相关文章