zoukankan      html  css  js  c++  java
  • knockout 监控数组的缺点

    knockout的监控数组没有想象中的强大,只能监控数组元素的位置变化,或个数的增减,然后对视图对应区域进行同步。

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script src="knockout.js"></script>
            <script>
    
    
            </script>
        </head>
        <body>
            <table>
                <thead>
                    <tr><th>First name</th><th>Last name</th></tr>
                </thead>
                <tbody data-bind="foreach: people">
                    <tr>
                        <td data-bind="text: firstName"></td>
                        <td data-bind="text: lastName"></td>
                    </tr>
                </tbody>
    
            </table>
             <!-- 不能将监控属性与$index相加,否则页面直接打印$index的实现,$index貌似只能单个使用 -->
            <ul data-bind="foreach: people">
                <li data-bind="text: $index"></li>
                <li data-bind="text: firstName + $index"></li>
            </ul>
            <script type="text/javascript">
                var a = {
                    people: ko.observableArray([
                        ko.observable({firstName: 'Bert', lastName: 'Bertington'}),
                        ko.observable({firstName: 'Charles', lastName: 'Charlesforth'}),
                        ko.observable({firstName: 'Denise', lastName: 'Dentiste'})
                    ])
                }
    
                ko.applyBindings(a);
                setTimeout(function() {
                    a.people()[1]({firstName: "7777", lastName: "3333"})
                    a.people.push({firstName: 'xxx', lastName: new Date})
                }, 700)
            </script>
        </body>
    </html>
    

    首先它那个对绑定属性的值的parser本来就非常弱,$index好像只能独立使用。像avalon的parser也非常弱,但我另一个转换为求值函数的parser还是能拿得出手的。

    其次,对数组的元素的操作不太人性化。如果我们是用 a.people()[1]({firstName: "7777"}),那么它的lastName的位置为空白,看来它是做替换操作而不是更新操作。

  • 相关阅读:
    python 读execl文件
    git 命令 个人备忘录
    python-django后端,富文本编辑器防XSS漏洞攻击,过滤富文本XSS
    mi
    Glance docker安装 cinder
    keystore glance
    openstack管理docker管理
    lvm 磁盘 数据库 wordpress 参考答案
    docker
    wordpress
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3145332.html
Copyright © 2011-2022 走看看