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>

现在当价格改变时,文本值会在expensiveaffordable之间切换。

另外,如果你要实现的功能像下面一样简单,你不需要创建一个计算监控,你可以传入一个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标签里添加其他元素标签,所以如下的写法无效。

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

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

<select data-bind="foreach: items">
<option>Item <!--ko text: name--><!--/ko--></option>
</select>

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

注意事项 4 :关于IE 6 的空格怪异模式

IE 6有一个奇怪的现象,有时会忽略空格,如下面闭合的空span标签所示。KO没有什么好的方法可以解决,如果你像这样写:

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

IE 6 会渲染为在to our web site之前无空格,你可以通过在span标签里插入任何内容来避免这个问题,比如:

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

其他浏览器,包括新版的IE都不会有这种情况。

依赖

只有核心KO库

Knockout v3.4.0 中文版教程-11-控制文本内容和外观-text绑定的更多相关文章

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

    5. style绑定 目的 style绑定用来给关联的DOM元素添加或移除一个或多个样式值.在如下情况很有用,比如,当某些值为负时,高亮显示,或者设置容器元素的宽度来匹配数值的改变. (注意:如果你不 ...

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

    4. css绑定 目的 css绑定可以给关联的DOM元素添加或移除一个或多个CSS类.该绑定很有用,比如,当一些值为负数时高亮这些值为红色. (注意:如果你不想使用一个CSS类选择器来附加样式而想直接 ...

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

    6. attr绑定 目的 attr绑定可以给关联DOM元素的任何属性赋值.这个绑定很棒,比如,当你想要设置通过视图模型给元素的title属性.img标签的src属性或超链接的href值,当视图模型对应 ...

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

    3. html绑定 目的 html绑定会使关联的DOM元素显示你参数指定的html内容. 当你的视图模型里面的值是HTML标记字符串,而你想要呈现它,这时候用html绑定特别合适. 例子 <di ...

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

    4.绑定 1. 控制文本内容和外观 1. visible绑定 目的 visible绑定可以根据你传入绑定的值控制关联的DOM元素显示或隐藏. 例子 <div data-bind="vi ...

  6. Knockout v3.4.0 中文版教程-16-控制流-foreach绑定

    2. 控制流 1. foreach绑定 目的 foreach绑定会遍历一个数组,为每个数组项生成重复的元素标记结构并做关联.这在渲染列表或表格的时候特别有用. 假设你的数组是一个监控数组,之后无论你进 ...

  7. Knockout v3.4.0 中文版教程-2-监控-通过监控创建视图模型(上)

    2. 监控 1.通过监控创建视图模型 1. 监控 Knockout是基于以下三个核心特性: 监控和依赖跟踪 声明式绑定 模板 在本节,你将第一次了解这三个特性,在这之前,我们先来了解以下MVVM模式和 ...

  8. Knockout v3.4.0 中文版教程-6-计算监控-可写的计算监控

    2.可写的计算监控 初学者可能想要跳过本节 - 可写的计算监控是相当高级的部分,在大多数情况下不是必需的. 通常,计算监控是一个通过其他监控值计算出的值,因此是只读的. 令人惊讶的是,可以使计算监控值 ...

  9. Knockout v3.4.0 中文版教程-1-入门和安装

    英文原版教程:http://knockoutjs.com/documentation/introduction.html 注:此教程根据英文原版翻译,仅作练习,如有不足或错误,请指正 说明: 对原文中 ...

随机推荐

  1. ecshop的商品列表输出中多出一条空记录

    这个是ECSHOP的一个BUG, 在模板中显示商品列表的位置,加一句{if $goods}判断商品存在才显示: {foreach from=$goods_list item=goods} {if $g ...

  2. INSERT ... ON DUPLICATE KEY UPDATE产生death lock死锁原理

    前言 编辑 我们在实际业务场景中,经常会有一个这样的需求,插入某条记录,如果已经存在了则更新它如果更新日期或者某些列上的累加操作等,我们肯定会想到使用INSERT ... ON DUPLICATE K ...

  3. WPF 控件树

    WPF控件树按照基类进行分类,记录下来便于编写自定义控件时查阅 RangeBase范围控件 Thumb拖到控件 TextBoxBase文本控件 ItemControl组控件 ContrentContr ...

  4. TCP简单程序

    服务器段: package com.dcz.socket; import java.io.IOException; import java.io.OutputStream; import java.n ...

  5. WebService学习之旅(六)使用Apache Axis2实现WebService客户端调用

    上节介绍了如何使用Axis2 发布一个WebService,Axis2除了为我们编写WebService应用带来了便利,也同样简化的客户端调用的过程,本节在上节的基础上使用Axis2自带的工具生成客户 ...

  6. JavaScript数据格式验证探讨

    1.需求 修改某个文本框数据,要求对修改后的格式做验证(必须是数字). 注:实际需求比上述复杂,为了说明问题,这里特意简化了需求(如:对修改后数据依赖条件的判断,数据入库等). 2.关于NaN的探讨( ...

  7. C#遍历文件夹下全部文件

    public static List<string> GetFile(string path, List<string> FileList, string RelativePa ...

  8. Luogu P5327 [ZJOI2019]语言

    ZJOI2019Day2的温暖题,然后考场上只会大常数的\(O(n\log^3 n)\),就懒得写拿了60pts走人 首先我们简化题意,容易发现每个点能到达的点形成了一个联通块,我们只需要统计出这个联 ...

  9. PLSQL练习-数据共享与整合技术

    1.编写一个存储过程,根据输入的工作类型,输出该工作的平均工资. 命令如下: 创建存储过程: create or replace procedure avgsal(v_job in emp.job%t ...

  10. 8 Java 归并排序(MergerSort)

    图片素材与文字描述来自:尚硅谷-韩顺平数据结构与算法. 1.基本思想 归并排序是利用归并的思想实现的排序方法,该算法采用经典的分治(divide-and-conquer)策略(分治法将问题分(divi ...