【分享】html5 開發工具——WeX5中的各種綁定方式

 今天我想整理一下html5 開發工具——WeX5中的各種綁定方式，下面分為表現類、流程類、交互類 3 種類型分別介紹。

表現類綁定

表現類的綁定屬性有visible、text、html、css、style、attr幾種，除了css表示css的class之外，其他都是字面意思。示范用法：

布局中加入一個div標簽和一個按鈕，並設置div標簽的綁定屬性如下右所示。

    

這樣設定好了綁定關系，然后在 js 中將各綁定屬性設置為可觀察對象，讓其可以自動更新界面：

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

var Model = function(){
this.callParent();
this.canVisit = justep.Bind.observable(true);
this.htmlCnt = justep.Bind.observable("add HTML element : <button>btn</button>");
this.myCls = justep.Bind.observable("div-one");
this.myStyle = justep.Bind.observable({color: "blue", "font-size": "22px"});
};

Model.prototype.button2Click = function(event){
this.myCls.set("div-two");
this.htmlCnt.set('remove button, add link: <a href="#">link</a>');
this.myStyle.set({border: "none", "font-size": "14px"});
};

return Model;
});

 

這里在 Model 構造函數里面初始化了各綁定屬性，然后定義 button 的點擊事件，在其中改變綁屬性值。效果如下：

    

這里為了演示我沒有使用text綁定，text綁定只能顯示字符，不能將標簽顯示出來。另外，text 和 html 綁定都是對內容進行修改，而同時修改內容會發生沖突，所以不能同時應用這兩個綁定。

注意，因為 js 的變量命名中不能帶 [ – ] （減號），所以引用帶[ – ]的CSS類名時需要用引號包起來。 style里面的內容也一樣，這個也是JSON格式的要求了。

流程類綁定

流程類包括foreach、if、ifnot、with綁定，if 和 ifnot 與 visible類似，差別就是：if 會直接從DOM中移除相應的組件，而visible只是控制隱藏顯示，組件還是在DOM里面的。with 跟 js 中的 with 也是一樣的效果，就是延長
了作用域鏈，簡單的來說就是在變量前加了個’前綴.’。這里只介紹一下foreach，其他綁定請參考wex5官網綁定教程。

foreach顧名思義，是針對每一項進行操作的，一般用在對多組數據的綁定上。這次我們使用 html 原生的 ul 標簽來做個示范：

先往界面編輯器里面放入一個list，並在list里面放入3個span標簽用於顯示，設置list的 bind-foreach為 items，然后分別設置3個span的 bind-text為 $index，itemName，creatTime：

    

再編寫js如下：

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

var Model = function(){
this.callParent();
this.items = [
{itemName: "JavaScript", creatTime: "Feb 10 2013"},
{itemName: "HTML", creatTime: "Mar 21 2015"},
{itemName: "CSS", creatTime: "May 13 2016"}
];
};

return Model;
});

 

效果：

    

現在只是單純的初始化數據，如果需要監視數據的變動，那就要用 this.items = justep.Bind.observableArray([{ itemName: ……}])來將數組設置為可觀察對象。

這里我們在list上設置foreach為items，那么list下的子項和items下的子項就對應起來了，所以list子項的span就能直接綁定item子項里面的數據，這個跟js中的作用域是一樣的。在使用foreach時要注意作用域的層次，否則很容易搞
亂。這里再給一個案例，通過這個案例應該可以很好理解foreach綁定中的作用域范圍了。

<ul component="$UI/system/components/justep/list/list" class="x-list x-list-template" xid="list1" bind-foreach="items">
<li xid="li1">
NO.<span xid="span1" bind-text="$index"></span>
<span xid="span2" bind-text="itemName"></span>
<span xid="span3" bind-text="creatTime"></span>
<a xid="a2" bind-click="$parent.removeItem">removeItem</a>
</li>
</ul>
<a component="$UI/system/components/justep/button/button" class="btn btn-default" label="button" xid="button1" bind-click="addItem">
<i xid="i1"></i>
<span xid="span4"></span>
</a>
HTML Code

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

var Model = function(){
this.callParent();
var that = this;
this.items = justep.Bind.observableArray([
{itemName: "JavaScript", creatTime: "Feb 10 2013"},
{itemName: "HTML", creatTime: "Mar 21 2015"},
{itemName: "CSS", creatTime: "May 13 2016"}
]);


this.addItem = function () {
that.items.push({itemName: "WeX5", creatTime: new Date().toDateString()});
};

//remove的對象是整個 li標簽，也就是 a標簽的父對象。實際上要執行的是 Model.items.remove(a.parent)
this.removeItem = function() {
that.items.remove(this);
};
};

return Model;
});
HTML Code

 

    
交互類綁定

交互類綁定主要用在表單中，包括常用的value、textInput、options、submit以及validation等。下面簡單說說。

（1）value綁定

使用方法和上面的一樣，在界面設計器中綁定bind-value，然后在 js 中進行相應的操作即可。比如官方的Hello World教程，也可以用 value 綁定來改寫：

先往界面編輯器中加入一個output控件和一個input控件，設置output控件的bind-text為‘Hello， ’+ mybind.get()，然后設置input控件的bind-value為mybind。然后在js中將mybind設置為可觀察對象即可。

這樣效果就出來了，每次輸入完輸入框失去焦點后output的內容就會被刷新。如果要讓輸入值馬上更新到output中，那就要配置一個附加參數，bind-value設置為 myBind, valueUpdate: ‘afterkeydown’。效果：

    

（2）textInput綁定

屬性HTML5的同學會知道DOM3事件中新增了一個 ‘textInput’事件，WeX5中也支持這個事件的綁定，目前可視化界面中還沒有這個事件，但是可以在自定義屬性中使用它。

    

如果需要實時同步效果的話，更推薦這個textInput方法，不單更加簡單，對瀏覽器的支持也更加好。

（3）options、selectOptions綁定

在下拉列表中可使用 options 來綁定子項的值，子項既可以是字符串，也可以是 js 對象。操作與上述綁定一樣，在select控件上自定義屬性bind-options，在js中設置其綁定值為可觀察對象數組（如this.listItem =
justep.Bind.observableArray([“Mark”,”Jimmy”,”Denny”]);）。綁定 js 對象也基本一樣的操作，只是需要注意設置相關的屬性。具體可參考官方教程：http://docs.wex5.com/data-bind-options/

（4）hasFocus綁定

這個主要用在輸入框上，不過原生事件中也有個focus，所以顯得不是特別有用，這里給個案例。

    

代碼：

<!-- HTML code -->
<p>Name:
<b bind-visible="!editing.get()" bind-text="name" bind-click="edit"> </b>
<input bind-visible="editing" bind-value="name" bind-hasFocus="editing"/>
</p>
<p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>
HTML Code

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

var Model = function(){
var that = this;
this.callParent();
this.name = justep.Bind.observable("Justep wex5");
this.editing = justep.Bind.observable(false);
this.edit = function() {
that.editing.set(true);
};
};
return Model;
});
JS Code

這個效果也是比較常見的了，主要是用兩個標簽的來回切換實現，切換事件由click和hasfocus觸發。

總結

基本的綁定用法就以上這些了，還有一些比如模板綁定和component綁定的內容就留到后續再介紹了。碼字不易，順手點贊哈~