zoukankan      html  css  js  c++  java
  • Knockout学习笔记之二($root,$parent及$data的区别)

    以下是我从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:

     

    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>
    View Code

    具体页面呈现:

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

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

  • 相关阅读:
    Redis 5.0 redis-cli --cluster
    Redis使用redis-trib.rb创建带密码的集群问题总结
    Docker实战之Redis-Cluster集群
    kafka作为流式处理的上一层,为什么吞吐量那么大?
    LAMP 实现全过程及wordpress的搭建
    mysql
    Mysql读写分离方案-MySQL Proxy环境部署记录
    Centos7.5部署MySQL5.7基于GTID主从复制+并行复制+半同步复制+读写分离(ProxySQL)
    iptables
    Nginx+Keepalived高可用集群
  • 原文地址:https://www.cnblogs.com/sccd/p/5981998.html
Copyright © 2011-2022 走看看