入门

监控属性

使用内置绑定

控制文本和外观

绑定逻辑控制

处理表单属性

解析模板

template 绑定

高级应用

插件

mapping 插件

"text" 绑定

目的

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

The text binding causes the associated DOM element to display the text value of your parameter.

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

Typically this is useful with elements like or that traditionally display text, but technically you can use it with any element.

例子

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将参数值会设置在元素的 innerText (IE) 或 textContent （Firefox和其它相似浏览器）属性上。原来的文本将会被覆盖。

KO sets the element’s innerText (for IE) or textContent (for Firefox and similar) property to your parameter value. Any previous text content will be overwritten.

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

If this parameter is an observable value, the binding will update the element’s text whenever the value changes. If the parameter isn’t observable, it will only set the element’s text once and will not update it again later.

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

If you supply something other than a number or a string (e.g., you pass an object or an array), the displayed text will be equivalent to yourParameter.toString()

其他参数
- 无

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

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

If you want to detemine text programmatically, one option is to create a computed observable, and use its evaluator function as a place for your code that works out what text to display.

例如：

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 怎么改变。

Now, the text will switch between “expensive” and “affordable” as needed whenever price changes.

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

Alternatively, you don’t need to create a computed observable if you’re doing something simple like this. You can pass an arbitrary JavaScript expression to the text binding. For example,

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

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

This has exactly the same result, without requiring the priceRating computed observable.

注2：关于HTML encoding

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

Since this binding sets your text value using innerText or textContent (and not using innerHTML), it’s safe to set any string value without risking HTML or script injection. For example, if you wrote:

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

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

… this would not render as italic text, but would render as literal text with visible angle brackets.

如果您需要以这种方式设置 HTML 内容，请参阅html 绑定。

If you need to set HTML content in this manner, see the html binding.

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

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

IE 6 has a strange quirk whereby it sometimes ignores whitespace that immediately follows an empty span. This is nothing directly to do with Knockout, but in case you do want write:

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

… IE6 将不会显示中间的那个空格，你可以通过下面这样的代码避免这个问题：

… and IE 6 renders no whitespace before the words to our web site, you can avoid the problem by putting any text into the , e.g.:

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

IE6以后版本和其它浏览器都没有这个问题。

Other browsers, and newer versions of IE, don’t have this quirk.

依赖性

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

Knockout 中文文档帮助手册教程

text 绑定

入门