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的位置为空白,看来它是做替换操作而不是更新操作。

你可能感兴趣的:(knockout)