初識綁定 · wex5

## WeX5數據綁定01：初體驗 WeX5 數據綁定(Data Bindings)是基于開源knockoutjs(http://knockoutjs.com)優化改進的前端MVVM庫。從今天開始準備對WeX5的數據綁定進行一系列的學習。為了能夠更深入學習和理解，我決定采用全部寫html和js源碼，而不用可視化拖拽組件的方式，大家可以把這些源碼拷貝到WeX5 Studio頁面里執行。 ## 在頁面中使用數據綁定先創建一個空頁面，切換到頁面的js，這時候代碼如下，這些代碼是創建頁面時自動生成的： define(function(require){ var $ = require("jquery"); var justep = require("$UI/system/lib/justep"); var Model = function(){ this.callParent(); }; return Model; }); 寫入如下數據綁定相關代碼（8-12行）： 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('wex5'); this.fullName = justep.Bind.computed(function() { return this.firstName.get() + " " + this.lastName.get(); }, this); }; return Model; }); 上面代碼中：8和9行代碼創建可監控對象；10-12行代碼創建可監控計算對象。this.firstName.get()可以取得可監控對象的值，this.firstName.set(‘xxx’)可以設置可監控對象的值。切換到空白頁的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" design="device:mobile"> <div component="$UI/system/components/justep/model/model" xid="model"/> </div> 寫入綁定相關的html代碼如下(7-9行)： <?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" design="device:mobile"> <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> 上面代碼中，7、8行用value綁定(bind-value)把input的value屬性綁定到可監控對象的值上。這兒的綁定是雙向綁定，雙向綁定就是如果可監控對象的值變化了，會自動通知到所綁定節點屬性；如果節點屬性變化了，也會自動改變可監控對象的值。9行用bind-text把可監控計算對象fullName綁定到span的text屬性上。 ## 運行效果在studio中運行起來，效果如下： [![bind-01](http://wex5.com/cn/wp-content/uploads/2015/03/bind-01.png)](http://wex5.com/cn/wp-content/uploads/2015/03/bind-01.png) 在姓和名輸入框里輸入，下面的姓名會自動計算。要注意修改后要離開輸入框才能自動計算。后面會講如果做到輸入字符后立即感知計算。 ## 簡單理解MVVM MVVM是啥，請大家網上自行補腦。從上面WeX5頁面源碼中我們可以看出，在頁面中有兩個元素： V（視圖）和 VM（視圖模型）。html源碼是V（View），js代碼是VM（ViewModel）。MVVM=M+V+VM，V和VM這兒都有了，M去哪兒了呢？不好意思，這個問題只能先提到這兒，后續文章會介紹到。本數據綁定的系列文章改編自http://www.qeefee.com/category/KnockoutJS和knockoutjs官網文檔，轉載此文也請說明出處！