【分享】WeX5的正确打开方式（5）——绑定机制

今天继续WeX5的绑定机制。

需求分析

记账本要实现的效果就是可以展示所有账单，还能实时动态编辑每一笔账单，官方案例的效果图如下：

展示页：

2

js 里面就一句：

1 Model.prototype.editBind = function(event){
2 var row = event.bindingContext.$object;
3 row.editing.set(true);
4 };
5

当然，editing 也必须要设置为可观察对象，不然没法更新UI展现。

1 function newItem(data) {
2 var testItem = {
3 fType : justep.Bind.observable(data.fType),
4 fClass : justep.Bind.observable(data.fClass),
5 fMoney : justep.Bind.observable(data.fMoney),
6 fDate : justep.Bind.observable(data.fDate),
7 fDescription : justep.Bind.observable(data.fDescription),
8 editing: justep.Bind.observable(data.editing || false)
9 };
10 return testItem;
11 }

记账本还要有个删除功能，这个当然也是非常简单了，直接操作可观察对象数组即可，事件绑定在删除按钮上。

1 Model.prototype.deleteBtnClick = function(event) {
2 var row = event.bindingContext.$object;
3 this.accountData.remove(row);
4 };

还有个增加记录，增加的操作就是先增加一条默认的数据，然后让用户去改动就变成新建啦，多加一个增加按钮绑定增加事件即可。

1 Model.prototype.addItem = function(event){
2 this.accountData.push(newItem({
3 fType : 'in',
4 fClass : '奖金',
5 fMoney : 5000,
6 fDate : '2015-10-22',
7 fDescription : '干得不错'
8 }));
9 };

这样就算做好了一个记账本啦，是不是感觉html5 APP开发很简单呢？？官方的教程使用了data组件与后台数据库通信，其实也就是将上述的testData换成Data组件而已，理解了绑定再去看就简单了。  哦，还有个美化的，根据收入支出分类以不同的颜色显示：li 项的 bind-css 设置为 {'account-in' : fType.get() == 'in','account-out' : fType.get()== 'out'} 就OK了，上个图：**Mapping 插件**大家可以看到上面为了将JSON对象中的每一项都设为可观察对象，我这边使用了一个 newItem 函数来将所有元素设置为可观察对象，而Mapping 插件就是起同样作用的。这里就不再举例说明了，大家看官方视频对照着用就可以了。总结  这一篇以一个记账本案例来总结了一下各种绑定的用法，希望能加深大家对绑定机制的理解。码字不易，顺手点赞哈~#html5、wex5、data、bind#

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！