text绑定（The "text" binding）

目的

text绑定可以使你传递的参数做为文本显示到相关的DOM元素里。

一般会用在如<span>或者<em>这类元素来显示文本，但从技术来讲它可以绑定到任何元素。

示例

Today's message is: <span data-bind="text: myMessage"></span>

<script type="text/javascript">

    var viewModel = {

        myMessage: ko.observable() // Initially blank

    };

    viewModel.myMessage("Hello, world!"); // Text appears

</script>

参数

Main parameter
knockout会把参数做为文本显示到元素中，原来存在的内容会被清除。
如果参数是observable的，那么当参数值改变时绑定也会发生更改。否则，只会在第一次绑定时更新文本内容，后面参数值改变时不会更新。

如果参数不是number或者string类型的（如传了一个对象或者数组），文本会把参数按toString()的方式显示。

Additional parameters
无

注1：使用函数或者表达式来确定text值

如果想通过编码方式确定文本内容，可以选择使用computed observable。

示例

The item is <span data-bind="text: priceRating"></span> today.

<script type="text/javascript">

    var viewModel = {

        price: ko.observable(24.95)

    };

    viewModel.priceRating = ko.pureComputed(function() {

        return this.price() > 50 ? "expensive" : "affordable";

    }, viewModel);

</script>

这样，text就会在"expensive"和"affordable"之间根据price的值进行切换显示。

另外，也可以不用computed observable，改用JS的表达式，如：

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

这两种做法的效果是一样的。

注2：HTML编码

text绑定的是文本内容，不用担心会产生HTML冲突或者脚本注入的问题，如：

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

这并不会产生一个斜体显示的文字，而是会原模原样的输出。如果的确需要输出HTML内容，则需要使用html binding.

注3：没有父元素如何显示文本内容

有时要显示text但是并不想将text绑定到任何元素上，如示例：

<select data-bind="foreach: items">

    <option>Item <span data-bind="text: name"></span></option>

</select>

并不想让文本显示到span当中，此时可以这样：

<select data-bind="foreach: items">

    <option>Item <!--ko text: name--><!--/ko--></option>

</select>

注释扮演一个开始、结束的标识，定义了一个“虚拟”的元素。Knockout明白要做休处理，就像有一个真实的元素绑定一样。

注4：IE6的空格问题

IE6有个很奇怪的问题，有时会忽略空格，KO对此并没有做任何的处理，如下面的示例：

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

本来to our web site前面有一个空格的，但是在IE6下并不会显示处理，我们要这样处理：

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

其它浏览器及IE6以上的版本没有这个问题。

巴特西

text绑定（The "text" binding）

最新文章

热门文章