"text" 绑定

text 绑定到DOM元素上，使得该元素显示的文本值为你绑定的参数。

该绑定在显示 <span> 或者 <em> 上非常有用，但是你可以用在任何元素上。

由于ko.applyBindings(viewModel)激活代码是必须要有的，所以以后的例子中就将其省略掉了，以减少代码量。

例子

Today's message is: <span data-bind="text: myMessage"></span>
 
<script type="text/javascript">
    var viewModel = {
        myMessage: ko.observable() // 初始是空的
    };
    viewModel.myMessage("Hello, world!"); // 设置要显示的文本内容
</script>

说明：

    KO会将属性值设置到元素的 innerText (IE) 或 textContent （Firefox和其它相似浏览器）属性上。原来的文本将会被覆盖。

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

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

使用函数或者表达式来决定text值

如果你想让你的text更可控，那选择是创建一个 依赖属性(Computed Observables)，然后在它的执行函数里编码，决定应该显示什么样的text文本。

例如：

The item is <span data-bind="text: priceRating"></span> today.
 
<script type="text/javascript">
    var viewModel = {
        price: ko.observable(24.95)
    };
    viewModel.priceRating = ko.computed(function() {
        return this.price() > 50 ? "expensive" : "affordable";
    }, viewModel);
</script>

现在，text文本将在“expensive”和“affordable”之间替换，取决于 price 怎么改变。

然而，如果有类似需求的话其实没有必要再声明一个依赖属性(Computed Observables)， 你只需要按照如下代码写JavaScript表达式绑定 text 就可以了：

The item is <span data-bind="text: price() > 50 ? 'expensive' : 'affordable'"></span> today.

结果是一样的，但我们不需要再声明 priceRating 的 依赖属性(Computed Observables)。

关于HTML encoding

因为该绑定是设置元素的 innerText 或 textContent （而不是 innerHTMLL），所以它是安全的，没有HTML或者脚本注入的风险。例如：如果你编写如下代码：

viewModel.myMessage("<i>Hello, world!</i>");

… 它不会显示斜体字，而是原样输出标签。如果你需要显示HTML内容，请参考下面将要讲的html绑定。

注3：关于IE 6的白空格whitespace

IE6有个奇怪的问题，如果 span里有空格的话，它将自动变成一个空的span。如果你想编写如下的代码的话，那Knockout将不起任何作用：

Welcome, <span data-bind="text: userName"></span> to our web site.

Welcome, <span data-bind="text: userName">&nbsp;</span> to our web site.   

"html" 绑定

html 绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。

如果在你的view model里声明HTML标记并且render的话，那非常有用。

例子

<div data-bind="html: details"></div>
 
<script type="text/javascript">
    var viewModel = {
        details: ko.observable() 
    };
    viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>"); // 显示一段html代码
</script>

    KO会将属性值设置到元素的 innerHTML 属性上，元素之前的内容将被覆盖。

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

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

注：关于HTML encoding

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