WeX5数据绑定04:html绑定

优质
小牛编辑
127浏览
2023-12-01

html绑定(bind-html)将在界面中添加特定的html元素,正如text绑定时候所说的哪样,如果要在界面中动态添加html元素,则需要使用html绑定。

代码实例:

//.w片段
<div bind-html="details"></div>

//.js片段
this.details = justep.Bind.observable("");
this.details.set("<em>For further details, view the report" +
   " <a href='report.w'>here</a>.</em>");

绑定规则:

  • html绑定首先清除所在元素的内容,然后使用jQuery的html()函数将html字符串值作为子元素插入容器元素中(innerHTML),如果容器中包含其它子元素,则这些子元素会被移除;
  • 如果绑定参数是监视属性,当属性值发生改变的时候,绑定会更新元素的子内容, 如果不是监视属性,则这种绑定只会发生一次;
  • 如果属性的值不是number或string类型(比如是object or array),会调用toString()方法将属性转换为string,然后设置到元素的innerHTML 。

使用注意:

  • 由于html绑定设置innerHTML属性,有受到脚本注入攻击的风险。如果不能保证html绑定值的安全性,请慎重使用html绑定,尽量使用text绑定或别的方式实现。