小虾虎鱼

小虾虎鱼

Knockoutjs的html绑定方法

作者 禾惠 发表于 2015/05/29,最后修改于 2015/05/29

Knockoutjs的html绑定与text的使用方法相同,唯一的区别在于:html是用于插入HTML代码,text用于插入文本。可以理解为html使用了innerHTMLtext使用了innerText

html的使用例子:

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

<script type="text/javascript">
    var viewModel = {
        details: ko.observable() // 默认为空
    };
    viewModel.details("<em style='color:red'>小虾虎鱼</em>"); // div显示的内容
</script>


需要注意的地方:Knockout会将传入到viewModel.details(params)中的参数params转换成字符串再替换掉被绑定元素里面的内容,即使用params.toString()转换成字符串再使用innerHTML,所以:

  • 如果params['a',{a:'b'},function(){}]得到的结果是:a,[object Object],function (){}
  • 如果params{a:'b'}得到的结果是:[object Object]
  • 如果paramsfunction(){return '123';}得到的结果是:function(){return '123';}