X5数据绑定学习01:初体验

        X5 数据绑定(Bind)是基于开源Knockoutjs优化改进的前端MVVM库。 从今天开始准备对X5的数据绑定进行一系列的学习。为了能够更深入学习和理解，我决定采用全部写html和js源码，而不用X5的组件，大家可以把这些源码拷贝到X5 Studio页面里执行。

在页面中使用数据绑定

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

define(function(require){
var $ = require(“jquery”);
var justep = require(“$UI/system/lib/justep”);

var Model = function(){
this.callParent();
};

return Model;
});

写入如下数据绑定相关代码（7-11行）：

define(function(require) {
var $ = require(“jquery”);
var justep = require(“$UI/system/lib/justep”);

var Model = function() {
this.callParent();
this.firstName = justep.Bind.observable(‘justep’);
this.lastName = justep.Bind.observable(‘x5′);
this.fullName = justep.Bind.computed(function() {
return this.firstName.get() + ” “ + this.lastName.get();
}, this);
};
return Model;
});

上面代码中：7和8行代码创建可绑定数据对象；9-11行代码创建计算对象。

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

<?xml version=“1.0” encoding=“UTF-8″?>

<div xmlns=“http://www.w3.org/1999/xhtml” xid=“window” class=“window” component=“$UI/system/components/justep/window/window”>
<div component=“$UI/system/components/justep/model/model” xid=“model”/>

</div>

写入绑定相关的html代码如下(6-8行)：

<?xml version=“1.0” encoding=“UTF-8″?>

<div xmlns=“http://www.w3.org/1999/xhtml” xid=“window” class=“window” component=“$UI/system/components/justep/window/window”>
<div component=“$UI/system/components/justep/model/model” xid=“model”/>

<p>姓：<input type=“text” bind-value=“firstName” /></p>
<p>名：<input type=“text” bind-value=“lastName” /></p>
<p>姓名：<span bind-text=“fullName”></span></p>
</div>

上面代码中，6、7行用value绑定(bind-value)把数据绑定对象的值绑定到input的value属性上。这儿的绑定是双向绑定，双向绑定就是如果绑定对象的值变化了，会自动通知到所绑定节点属性；如果节点属性变化了，也会自动改变绑定对象的值。

运行效果

在studio中运行起来，效果如下：

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

转自：http://justep.com/cn/6.html