之前在项目中有个功能,是根据数据模型生成页面,然后页面变动之后,再同步到数据模型之中。
当时用的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>
好的工具真的是事半功倍。