之前在项目中有个功能,是根据数据模型生成页面,然后页面变动之后,再同步到数据模型之中。
当时用的jquery写的,一点一点的控制,整个功能写下来、测试,花了很长时间,而且还担心出bug。
现在用mvvm思想的类库knockoutjs重构下,发现是如此的轻松,完全不用考虑dom变化的细节。
下面贴出关键代码:
<div data-bind="foreach:groups"> <label> <input type="checkbox" data-bind="attr:{checked:isCheck},value:groupId" /><span data-bind="text:groupName"></span> </label> </div> <script> var viewModel = function () { groups = ko.observableArray([ { groupId: 1, groupName: '.net', isCheck: true }, { groupId: 2, groupName: '.ef', isCheck: false }, { groupId: 3, groupName: '.mvc', isCheck: true } ]) }; ko.applyBindings(new viewModel()); </script>
好的工具真的是事半功倍。