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

﹏ヽ暗。殇╰゛Y 2023-06-02 14:55 16阅读 0赞

### 2. **text**绑定 ###

**目的**  
`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>

**参数**

*  主参数
    
     *  KO把你的参数值设置为元素文本节点的内容。任何之前的内容会被重写。
     *  如果参数是监控对象，在值改变时，元素文本会自动更新。如果参数不是监控对象，则只在第一次会更新。
     *  你如果输入一些数字或字符串（即传入一个对象或数组），显示内容等同于`yourParameter.toString()`的结果。
 *  额外参数
    
     *  无

**注意事项 1：使用函数或表达式确定文本内容**

如果你想通过程序确定文本内容，一个可选的方式是创建一个计算监控，使用求值函数在其中写自定义逻辑来确定显示内容。

比如：

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>

现在当价格改变时，文本值会在`expensive`和`affordable`之间切换。

另外，如果你要实现的功能像下面一样简单，你不需要创建一个计算监控，你可以传入一个javascript表达式给`text`绑定，比如：

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

两个的结果是一样的，但是不需要`priceRating`计算监控。

**注意事项 2：HTML 编码**

因为使用文本节点来绑定你的文本值，所以设置任何字符串都是安全的，而不用担心html或脚本注入。比如，你像下面这样写：

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

它不会呈现会斜体文本，即不会进行解析，只会原文呈现。

如果你需要用这种方式设置HTML内容，请看**HTML绑定**

**注意事项 3 ：使用“text”绑定而不需要容器元素**  
有时候你想要使用KO设置文本内容而不想添加一个额外的标签用于`text`绑定。比如，你不允许在**option**标签里添加其他元素标签，所以如下的写法无效。

对于这种情况，你可以使用无容器语法，该语法基于注释标签。

`` and ``作为开始/结束标记，定义了一个“虚拟元素”包含在里面。KO能解析这种虚拟元素语法，并且绑定值就像真有容器元素一样。