完全开源的App开发框架WeX5之数据绑定01:初体验

WeX5移动开发云 发布于 2015/03/17 16:48
阅读 14K+
收藏 5

WeX5数据绑定01:初体验


WeX5 数据绑定(Data Bindings)是基于开源knockoutjs(http://knockoutjs.com)优化改进的前端MVVM库。 从今天开始准备对WeX5的数据绑定进行一系列的学习。为了能够更深入学习和理解,我决定采用全部写html和js源码,而不用可视化拖拽组件的方式,大家可以把这些源码拷贝到WeX5 Studio页面里执行。

在页面中使用数据绑定

先创建一个空页面,切换到页面的js,这时候代码如下,这些代码是创建页面时自动生成的:

1
2
3
4
5
6
7
8
9
10
define(function(require){
    var$ = require("jquery");
    varjustep = require("$UI/system/lib/justep");
 
    varModel =function(){
        this.callParent();
    };
 
    returnModel;
});

 

写入如下数据绑定相关代码(8-12行):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
define(function(require){
    var$ = require("jquery");
    varjustep = require("$UI/system/lib/justep");
 
    varModel =function(){
        this.callParent();
 
        this.firstName = justep.Bind.observable('justep');
        this.lastName = justep.Bind.observable('wex5');
        this.fullName = justep.Bind.computed(function() {
            returnthis.firstName.get() +" "+this.lastName.get();
        },this);      
 
    };
 
    returnModel;
});

 

上面代码中:8和9行代码创建可绑定数据对象;10-12行代码创建计算对象。

 

切换到空白页的html源码,这时html源码如下,这些源码也是生成页面时自动生成的:

1
2
3
4
5
6
<?xmlversion="1.0"encoding="UTF-8"?>
 
<divxmlns="http://www.w3.org/1999/xhtml"xid="window"class="window"
    component="$UI/system/components/justep/window/window"design="device:mobile">
  <divcomponent="$UI/system/components/justep/model/model"xid="model"/>
</div>

 

写入绑定相关的html代码如下(7-9行):

1
2
3
4
5
6
7
8
9
10
11
<?xmlversion="1.0"encoding="UTF-8"?>
 
<divxmlns="http://www.w3.org/1999/xhtml"xid="window"class="window"
    component="$UI/system/components/justep/window/window"design="device:mobile">
  <divcomponent="$UI/system/components/justep/model/model"xid="model"/>
 
  <p>姓:<inputtype="text"bind-value="firstName"/></p>
  <p>名:<inputtype="text"bind-value="lastName"/></p>
  <p>姓名:<spanbind-text="fullName"></span></p>
 
</div>

 

上面代码中,7、8行用value绑定(bind-value)把数据绑定对象的值绑定到input的value属性上。这儿的绑定是双向绑定,双向绑定就是如果绑定对象的值变化了,会自动通知到所绑定节点属性;如果节点属性变化了,也会自动改变绑定对象的值。9行用bind-text把计算域fullName绑定到span的text属性上。

 

运行效果

在studio中运行起来,效果如下:

bind-01

姓或名输入框,下面的姓名会自动计算。大家要注意修改后要离开输入框才能自动计算。后面会讲如果做到输入字符后立即感知计算。

 

简单理解MVVM

MVVM是啥,请大家网上自行补脑。从上面WeX5页面源码中我们可以看出,在页面中有两个元素: V(视图)和 VM(视图模型)。html源码是V(View),js代码是VM(ViewModel)。MVVM=M+V+VM,V和VM这儿都有了,M去哪儿了呢?不好意思,这个问题只能先提到这儿,后续文章会介绍到。                                                                  


X5开发框架在OSChina唯一托管,如果大家觉得这个好,请帮忙加星加fork,多谢了啊。

http://git.oschina.net/X5OK/WeX5


扫二维码,关注WeX5

(或长按以下二维码,选择“识别图中二维码”

WeX5.com,Apache开源,国内最具规模的App生态圈!


加载中
0
WeX5移动开发云
WeX5移动开发云
抱歉,原文的源码OSchina托管超链接打不开,点击这个能打开:

http://git.oschina.net/X5OK/WeX5   

(原文链接/X5OK/WeX5并没有错,但实际指向的是旧地址、已作废,所以打不开;感谢热心网友bigman的反馈!小礼品已经发,请查收)

返回顶部
顶部