Knockout v3.4.0 中文版教程-12-控制文本内容和外观-html绑定

3. html绑定

目的

html绑定会使关联的DOM元素显示你参数指定的html内容。

当你的视图模型里面的值是HTML标记字符串，而你想要呈现它，这时候用html绑定特别合适。

例子

<div data-bind="html: details"></div>

<script type="text/javascript">
    var viewModel = {
        details: ko.observable() // Initially blank
    };
    viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>"); // HTML content appears
</script>

参数

• 主参数

  KO首先会清空关联Dom元素之前的内容，如果引入了jQuery，会使用jQuery的html()函数来把你的参数值设置为Dom元素的新内容，否则会把字符串转换为HTML节点，然后附加每一个节点作为Dom元素的子节点。

  如果参数是一个监控值，当值改变时，绑定的元素内容会自动更新。如果参数不是监控对象，则只会更改值一次，之后不会自动更新。

  如果你传入一些其他的数字或字符串（比如，你传入一个数组对象），innerHTML的值会是yourParameter.toString()的结果。

• 额外参数
  
  无

注意事项：关于HTML编码

当绑定通过innerHTML设置了你的元素内容时，你应该小心，不要使用未知来源的值，因为这样很有可能造成脚本注入攻击。如果你不能保证显示内容是安全的（比如，内容是来自不同用户输入后存储在数据库里面的），那么你可以使用text绑定，这样会通过innerText或textContent来设置值。

依赖

只有核心KO库