html 绑定

html 绑定

---

目的

html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。

 

例子

<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设置该参数值到元素的innerHTML属性上，元素之前的内容将被覆盖。

如果参数是监控属性observable的，那元素的内容将根据参数值的变化而更新，如果不是，那元素的内容将只设置一次并且以后不在更新。

如果你传的是不是数字或者字符串（例如一个对象或者数组），那显示的文本将是yourParameter.toString()的等价内容。

其它参数

无

 

注：关于HTML encoding

因为该绑定设置元素的innerHTML，你应该注意不要使用不安全的HTML代码，因为有可能引起脚本注入攻击。如果你不确信是否安全（比如显示用户输入的内容），那你应该使用text绑定，因为这个绑定只是设置元素的text 值innerText和textContent。

 

依赖性

除KO核心类库外，无依赖。

这个绑定的功能与text binding相对应，不同点为：

• 控制DOM元素的innerHtml属性
• 不会对内容进行Html编码，你可以定义自己的html标签注入进去

<script src ="js/knockout.js"></script>
<script src = "js/jquery-1.10.2"></script>

<div data-bind="html: details"></div>
<div data-bind="text: 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>");
window.setInterval(function()
{
viewModel.details("<p style='color:red'>" + "now Time is " + new Date().getTime() + "</p>") ;
},1000);
// HTML content appears
ko.applyBindings(viewModel);
</script>

执行结果

now Time is 1439809372167

<p style='color:red'>now Time is 1439809372167</p>