## 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)。