Knockout v3.4.0 中文版教程-11-控制文本内容和外观-text绑定
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标签里添加其他元素标签,所以如下的写法无效。
<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"> </span> to our web site.
其他浏览器,包括新版的IE都不会有这种情况。
依赖
只有核心KO库
Knockout v3.4.0 中文版教程-11-控制文本内容和外观-text绑定的更多相关文章
- Knockout v3.4.0 中文版教程-14-控制文本内容和外观-style绑定
5. style绑定 目的 style绑定用来给关联的DOM元素添加或移除一个或多个样式值.在如下情况很有用,比如,当某些值为负时,高亮显示,或者设置容器元素的宽度来匹配数值的改变. (注意:如果你不 ...
- Knockout v3.4.0 中文版教程-13-控制文本内容和外观-css绑定
4. css绑定 目的 css绑定可以给关联的DOM元素添加或移除一个或多个CSS类.该绑定很有用,比如,当一些值为负数时高亮这些值为红色. (注意:如果你不想使用一个CSS类选择器来附加样式而想直接 ...
- Knockout v3.4.0 中文版教程-15-控制文本内容和外观-attr绑定
6. attr绑定 目的 attr绑定可以给关联DOM元素的任何属性赋值.这个绑定很棒,比如,当你想要设置通过视图模型给元素的title属性.img标签的src属性或超链接的href值,当视图模型对应 ...
- Knockout v3.4.0 中文版教程-12-控制文本内容和外观-html绑定
3. html绑定 目的 html绑定会使关联的DOM元素显示你参数指定的html内容. 当你的视图模型里面的值是HTML标记字符串,而你想要呈现它,这时候用html绑定特别合适. 例子 <di ...
- Knockout v3.4.0 中文版教程-10-绑定-控制文本内容和外观-visible绑定
4.绑定 1. 控制文本内容和外观 1. visible绑定 目的 visible绑定可以根据你传入绑定的值控制关联的DOM元素显示或隐藏. 例子 <div data-bind="vi ...
- Knockout v3.4.0 中文版教程-16-控制流-foreach绑定
2. 控制流 1. foreach绑定 目的 foreach绑定会遍历一个数组,为每个数组项生成重复的元素标记结构并做关联.这在渲染列表或表格的时候特别有用. 假设你的数组是一个监控数组,之后无论你进 ...
- Knockout v3.4.0 中文版教程-2-监控-通过监控创建视图模型(上)
2. 监控 1.通过监控创建视图模型 1. 监控 Knockout是基于以下三个核心特性: 监控和依赖跟踪 声明式绑定 模板 在本节,你将第一次了解这三个特性,在这之前,我们先来了解以下MVVM模式和 ...
- Knockout v3.4.0 中文版教程-6-计算监控-可写的计算监控
2.可写的计算监控 初学者可能想要跳过本节 - 可写的计算监控是相当高级的部分,在大多数情况下不是必需的. 通常,计算监控是一个通过其他监控值计算出的值,因此是只读的. 令人惊讶的是,可以使计算监控值 ...
- Knockout v3.4.0 中文版教程-1-入门和安装
英文原版教程:http://knockoutjs.com/documentation/introduction.html 注:此教程根据英文原版翻译,仅作练习,如有不足或错误,请指正 说明: 对原文中 ...
随机推荐
- ecshop的商品列表输出中多出一条空记录
这个是ECSHOP的一个BUG, 在模板中显示商品列表的位置,加一句{if $goods}判断商品存在才显示: {foreach from=$goods_list item=goods} {if $g ...
- INSERT ... ON DUPLICATE KEY UPDATE产生death lock死锁原理
前言 编辑 我们在实际业务场景中,经常会有一个这样的需求,插入某条记录,如果已经存在了则更新它如果更新日期或者某些列上的累加操作等,我们肯定会想到使用INSERT ... ON DUPLICATE K ...
- WPF 控件树
WPF控件树按照基类进行分类,记录下来便于编写自定义控件时查阅 RangeBase范围控件 Thumb拖到控件 TextBoxBase文本控件 ItemControl组控件 ContrentContr ...
- TCP简单程序
服务器段: package com.dcz.socket; import java.io.IOException; import java.io.OutputStream; import java.n ...
- WebService学习之旅(六)使用Apache Axis2实现WebService客户端调用
上节介绍了如何使用Axis2 发布一个WebService,Axis2除了为我们编写WebService应用带来了便利,也同样简化的客户端调用的过程,本节在上节的基础上使用Axis2自带的工具生成客户 ...
- JavaScript数据格式验证探讨
1.需求 修改某个文本框数据,要求对修改后的格式做验证(必须是数字). 注:实际需求比上述复杂,为了说明问题,这里特意简化了需求(如:对修改后数据依赖条件的判断,数据入库等). 2.关于NaN的探讨( ...
- C#遍历文件夹下全部文件
public static List<string> GetFile(string path, List<string> FileList, string RelativePa ...
- Luogu P5327 [ZJOI2019]语言
ZJOI2019Day2的温暖题,然后考场上只会大常数的\(O(n\log^3 n)\),就懒得写拿了60pts走人 首先我们简化题意,容易发现每个点能到达的点形成了一个联通块,我们只需要统计出这个联 ...
- PLSQL练习-数据共享与整合技术
1.编写一个存储过程,根据输入的工作类型,输出该工作的平均工资. 命令如下: 创建存储过程: create or replace procedure avgsal(v_job in emp.job%t ...
- 8 Java 归并排序(MergerSort)
图片素材与文字描述来自:尚硅谷-韩顺平数据结构与算法. 1.基本思想 归并排序是利用归并的思想实现的排序方法,该算法采用经典的分治(divide-and-conquer)策略(分治法将问题分(divi ...