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的位置为空白,看来它是做替换操作而不是更新操作。
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年