【分享】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綁定的內容就留到後續再介紹了。碼字不易，順手點贊哈~