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库
最新文章
- iOS开发多线程篇 — GCD的常见用法
- Android 定位地理坐标体系
- TypeError: &#39;stepUp&#39; called on an object that does not implement interface HTMLInputElement.
- Oracle找出非数字
- ajaxForm笔记
- Android Virtual Devices代理上网
- 通过 XML HTTP 把文本文件载入 HTML 元素
- 使用java8的lambda将list转为map(转)
- ubuntu 11.10 安装apache2 tomcat6
- c#基础语言编程-按值类型和引用类型传递参数
- Cocos2d-x Tiled地图编辑器(一)基本使用
- 【转】深入探讨 Java 类加载器
- 在树莓派上编译安装golang环境
- Java 线程安全LocalTime 和LocaldateTime 新的Date和Time类 -JDK8新时间类的简单使用
- MySQL性能分析及explain的使用(转)
- Xamarin.Form与Xamarin.Android或Xamarin.IOS的区别简述
- [Hive_add_10] Hive 的 serde (序列化 &; 反序列化) 操作
- CF865D Buy Low Sell High
- MVC 扩展RadioButtonListFor和CheckBoxListFor
- sed 替换有单引号的行
热门文章
- java emoji表情存储解决方案
- APPCLOUD 判断网络
- python flask学习(1)与Git基础操作
- Spring框架学习——AOP的开发
- eureka集群环境搭建
- 中国区 Azure 应用程序开发说明
- 如何修改tomcat的启动方式为 run
- Caused by: java.lang.NoClassDefFoundError: com/sun/tools/javac/util/List at
- 如何用JavaScript判断前端应用运行环境(移动平台还是桌面环境)
- flex常用属性