text绑定(bind-text)用来控制页面元素显示的文本内容，常用在<span>、<em>等元素中，当然也可以用于其它任何元素。

基本text绑定

示例代码：

1
2
3
4
5
6
//.w片段
Today's message is: <span bind-text="myMessage">default text</span>
 
//.js片段
this.myMessage = justep.Bind.observable("");
this.myMessage.set("Hello, world!");

上面代码执行后，DOM节点如下:

1
Today's message is: <span>Hello, world!</span>
span的text属性值"default text"被text绑定自动替换为了"Hello, world!".

绑定规则：

  • 使用text绑定的时候，绑定会为元素添加一个文本，元素原来的文本内容将会被重写。
  • 如果参数是监视属性，当属性值发生改变的时候，界面也会随之被更新， 如果不是监视属性，则这种绑定只会发生一次。
  • 如果属性的值不是string类型，会调用toString()方法将属性转换为string。

text绑定表达式

text绑定也可以支持表达式。请看下面的示例代码：

1
2
3
4
5
6
7
8
//.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属性。如果用绑定表达式，代码可以简化为下面代码：

1
2
3
4
5
//.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代码，界面会怎么显示呢？请看下面的代码：

1
this.myMessage.set("<i>Hello, world!</i>");

这段代码的显示效果为：
Today’s message is: <i>Hello, world!</i>
html代码将会被编码，把相关的标签显示出来。如果要绑定html代码，需要使用html绑定(bind-html)。

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443