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 监控数组的缺点

相关文章