## WeX5數據綁定03：text綁定 text綁定(bind-text)用來控制頁面元素顯示的文本內容，常用在、等元素中，當然也可以用于其它任何元素。 ### 基本text綁定 示例代碼： //.w片段 Today's message is: <span bind-text="myMessage">default text</span> //.js片段 this.myMessage = justep.Bind.observable(""); this.myMessage.set("Hello, world!"); 上面代碼執行后，DOM節點如下: Today's message is: <span>Hello, world!</span> ~~~ span的text屬性值"default text"被text綁定自動替換為了"Hello, world!". ~~~ **綁定規則：** * **使用text綁定的時候，綁定會為元素添加一個文本，元素原來的文本內容將會被重寫。** * **如果參數是監視屬性，當屬性值發生改變的時候，界面也會隨之被更新， 如果不是監視屬性，則這種綁定只會發生一次。** * **如果屬性的值不是string類型，會調用toString()方法將屬性轉換為string。** ### text綁定表達式 text綁定也可以支持表達式。請看下面的示例代碼： //.w片段 The item is <span bind-text="priceRating"></span> today. //.js片段 this.price = justep.Bind.observable(24.95); this.priceRating = justep.Bind.computed(function() { return this.price.get() > 50 ? "expensive" : "affordable"; }, this); 在上面這段代碼中，text綁定的priceRating是一個computed屬性。如果用綁定表達式，代碼可以簡化為下面代碼： //.w片段 The item is <span bind-text="price.get() > 50 ? 'expensive' : 'affordable'"></span> today. //.js片段 this.price = justep.Bind.observable(24.95); 這段代碼和上面使用computed屬性的結果是一樣的。把表達式寫到.w里，這種寫法更簡潔，但維護性要稍微差一點。 ### 綁定HTML字符串 如果我們要綁定的屬性是html代碼，界面會怎么顯示呢？請看下面的代碼： this.myMessage.set("<i>Hello, world!</i>"); 這段代碼的顯示效果為： Today’s message is:?Hello, world! html代碼將會被編碼，把相關的標簽顯示出來。如果要綁定html代碼，需要使用html綁定(bind-html)。