资讯专栏INFORMATION COLUMN

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

JessYanCoding / 2576人阅读

摘要:记账本还要有个删除功能,这个当然也是非常简单了,直接操作可观察对象数组即可,事件绑定在删除按钮上。总结这一篇以一个记账本案例来总结了一下各种绑定的用法,希望能加深大家对绑定机制的理解。

今天继续WeX5的绑定机制。

需求分析

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

展示页:

编辑页

个人觉得官方案例加入了许多元素,不熟悉的同学每一个点都很难理解,所以为了更清晰地介绍绑定机制,小茄这里去掉了数据库和数据组件,改用写死的JSON数据来测试;UI层上也做简化,去掉页面片段的跳转,使用一个页面片段进行演示。

页面布局

先看看页面布局,由于要展示多项数据,所以明显需要一个列表组件;另外为了实现编辑功能,还需要布局一个编辑组件。布局起来非常简单:

展示列表组件:

列表组件使用WeX5现成的 list 控件,这个控件内部自带一个 list 子项的模板,在模板中放入所需的几个 output 和删除按钮即可。当然,为了达到上图的布局效果,还需要加入一些布局组件。有问题的同学可以看看官方视频教程,样式的设置也请参考视频,这不是本文的重点,在此不再赘述。

数据绑定

重要的一点是要将JSON数据绑定到list模板中,这里用的是foreach绑定,见下图(当然也可以用template绑定+模板文件来实现,不过那样的话还需要编写模板文件,在自定义较强的场景下可以使用)。其他组件相应的绑定也如上图所示,分别在各个 output 的 bind-ref 中输入 fClass、fMoney等。

JS中给 accountData 一组静态数据,实际应用中这些数据应该是从后台数据库中获取的。

 1 var testData = [{
  2     fType : "out",
  3     fClass : "购物",
  4     fMoney : 465,
  5     fDate : "2015-05-24",
  6     fDescription : "这是备注"
  7 }, {
  8     fType : "out",
  9     fClass : "餐费",
 10     fMoney : 50,
 11     fDate : "2015-10-22",
 12     fDescription : "吃麻辣烫"
 13 }, {
 14     fType : "in",
 15     fClass : "奖金",
 16     fMoney : 500,
 17     fDate : "2015-10-22",
 18     fDescription : "干得不错"
 19 }, {
 20     fType : "in",
 21     fClass : "交通",
 22     fMoney : 85,
 23     fDate : "2015-10-22",
 24     fDescription : "打了个车"
 25 }];
 26 
 27 var Model = function() {
 28     this.callParent();
 29     this.accountData = testData;
 30 };

这时候打开浏览器调试可以看到JSON已经完整展现在页面上。回顾一下上两篇文章的内容,明显上述写法就是简单的初始化,并没有设置可观察对象,也就是说数据变更也不会更新UI。下面来设置双向绑定。

首先要明确的一点是,我们不单要监视 testData 数组的状态变化,还需要监视每个JSON数据的变化,所以单纯的设置数组为可监视对象是不够的,还需要监视数组的值。这里需要改变一下写法,不能再一次性赋值了,要改成构造函数动态赋值。

 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     };
  9     return testItem;
 10 }
 11 
 12 var Model = function() {
 13     this.callParent();
 14     this.accountData = justep.Bind.observableArray([]);
 15     for (var n = 0, len = testData.length; n < len; n++) {
 16         this.accountData.push(newItem(testData[n]));
 17     }
 18 };

这样绑定之后,无论是改变数组(增减数组项)还是改变具体的数据都可以让界面自动更新了。如果采用最开始的写法,那是不会自动更新UI界面的。

上面的增加项已经是固定的,示范下而已,现在试着动态改变数据。先放效果:

相比官方的转到一个独立页面的效果,这个效果更加的符合认知习惯,而且不用刷到另一页,体验更加友好,鼠标点哪改哪~

做法也很简单,就是在output框下再接一个input框,设置output和input的 visible互斥,点击事件更改visible状态。HTML源码片段是这样的:

1 
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 插件就是起同样作用的。这里就不再举例说明了,大家看官方视频对照着用就可以了。

总结
这一篇以一个记账本案例来总结了一下各种绑定的用法,希望能加深大家对绑定机制的理解。码字不易,顺手点赞哈~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/60041.html

相关文章

  • WeX5正确打开方式(1)

    摘要:这里小茄也默认大家有编程基础的了,先对比原生的写法可以看出主要的差异点是中使用了代替了原生的,所以要用来获取元素节点。 最近在研究WeX5,想在这里记录下使用过程中的点滴,今天先把之前已经掌握的分享一下。WeX5官方的开发指南难度系数较大,面向的受众可能是已经敲过上万行代码的html5 app开发者。但是作为一个刚进入代码世界的html5 app开发宝宝,本人表示拿着这份指南也找不到南...

    lylwyy2016 评论0 收藏0
  • WeX5正确打开方式(1)

    摘要:这里小茄也默认大家有编程基础的了,先对比原生的写法可以看出主要的差异点是中使用了代替了原生的,所以要用来获取元素节点。 最近在研究WeX5,想在这里记录下使用过程中的点滴,今天先把之前已经掌握的分享一下。WeX5官方的开发指南难度系数较大,面向的受众可能是已经敲过上万行代码的html5 app开发者。但是作为一个刚进入代码世界的html5 app开发宝宝,本人表示拿着这份指南也找不到南...

    LeoHsiun 评论0 收藏0
  • 分享WeX5正确打开方式(6)——数据组件初探

    摘要:本文是的正确打开方式系列的第篇文章,简单介绍一下中数据组件的特性和结构形式。恰好,开发工具实现了你的愿望,这个组件就是数据组件。数据组件建好之后,接着就是数据的展现了。 本文是【WeX5的正确打开方式】系列的第6篇文章,简单介绍一下WeX5中数据组件的特性和结构形式。 数据组件的由来 上一篇 WeX5绑定机制我们实现了一个简单的记账本应用,当时所有数据都用 JSON 对象写在 js 代...

    不知名网友 评论0 收藏0
  • 分享WeX5正确打开方式(7)——数据组件详解

    摘要:本文是的正确打开方式系列的第篇文章,详细介绍中数据组件的增删改查以及数据定位方法。另外,由于是直接挂在组件之下的,为了简化数据组件的引用,的方法也可以引用到数据组件。要注意的是使用键转移输入焦点是不会自动进行数据定位的。 本文是【WeX5的正确打开方式】系列的第7篇文章,详细介绍WeX5中数据组件的增删改查以及数据定位方法。 前言 上一篇 数据组件初探 我们简单介绍了数据组件的引入和底...

    wenhai.he 评论0 收藏0
  • 分享WeX5正确打开方式(2)

    摘要:部分先打开源码点击编辑器左下角的标签熟悉开发的同学一眼就能看出,这是模块化的写法。在中使用外联样式也是按需加载的,编写方式跟正常的开发一样的。官方建议的也是使用外联样式,降低后期维护成本。 我的上篇文章介绍了WeX5中基本的页面布局和交互事件写法,有人私信我为什么源码中的js要那样写,HTML源码的结构是怎样的之类。那今天就总结一下Hello World的源码结构,才识有限,有疑问欢迎...

    13651657101 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<