博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Knockout 新版应用开发教程之"text"绑定
阅读量:6979 次
发布时间:2019-06-27

本文共 2233 字,大约阅读时间需要 7 分钟。

目的

DOM元素显示文本的值是你传递的参数,前提是text先绑定到该元素上

典型的常用元素 <span>或者<em>习惯性的用来显示文本,但是在技术上来说你可以用任何元素的。

例子:

2
3
4
5
6
7
8
9
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>

参数

  • 主要参数
    • Knockout 会把参数值设置到元素文本节点上,节点上任何存在的内容将会被覆盖重写
    • 这个参数是一个监控属性值,任何时候在值被改变的时候它绑定元素text将会触发更新,假如不是一个监控属性,它仅仅就是text,不会更新
    • 假如你提供一些非数字或者字符串(举例来说,你对象或者数组,那显示的文本将是yourParameter.toString()的等价内容。
  • 附加参数

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

如果你想要以编程方式决定text的取值,一个选择是去创建一个  依赖属性,并且你在它的执行函数里编码,决定应该显示什么样的text文本。

例如:

2
3
4
5
6
7
8
9
10
11
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改变的时候.

也许,你只是想做一些简单的操作,你不需要是创建一个依赖监控属性。你能通过任意的javascript表达式去绑定text,

例如:

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

同样的结果,但我们不需要再声明priceRating依赖监控属性

注2:关于HTML编码

因为这个绑定,设置你的文本值使用一个文本节点,所以它是安全的如果设置任何的字符串的值,没有HTML或者脚本注入的风险

例如,如果你这样写:

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

这个斜体的文本将不会渲染出来,而是原样输出标签。如果你需要显示HTML内容,请参考html绑定.

注3:不能在一个容器元素中用“text”

有时,你想要用KO设置一text,但是text绑定不能包含一个额外的元素

例如,在一个option节点中,你不允包含其他的元素,所以下面将不会工作。

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

为了处理这样的情况,你能用containerless语法,它是基于注释标签

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

<!--ko-->和<!--/ko—> ,注释是充当开始/结束标记,定义一个‘virtual element’在包含的标记内,

Knockout能理解virtual element的语法规则,并且能够绑定好,如果你有一个真正的容器元素

注4: 关于IE6空白空格的怪癖

IE6 有一个怪癖,如果 span里有空格的话,它将自动变成一个空的span。

如果你想编写如下的代码的话,那Knockout将不起任何作用:

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

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

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

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

依赖性:除KO核心类库外,无依赖。

本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/3197389.html,如需转载请自行联系原作者
你可能感兴趣的文章
用 Label 控制 Service 的位置 - 每天5分钟玩转 Docker 容器技术(106)
查看>>
Android美工坊:Selector选择器的使用
查看>>
Nginx&Apache&PHP参数汇总
查看>>
Android重绘ListView高度
查看>>
centos6 防火墙iptables操作整理
查看>>
Android 中文 API (25) —— ZoomControls
查看>>
转载:python原生态的输入窗口抖动+输入特效
查看>>
给 Windows 驱动程序安装提速
查看>>
提高mysql性能的开源软件
查看>>
ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]
查看>>
Python网络编程Socket应用实例
查看>>
2015香港书展
查看>>
Linux多线程实践(6) --Posix读写锁解决读者写者问题
查看>>
Xtrabackup bug记录
查看>>
SilverLight 4页面跳转大全
查看>>
ssh-keygen
查看>>
Android开发实践:为什么要继承onMeasure()
查看>>
esxi4.1使用IDE格式磁盘
查看>>
刚学习了linux的DHCP 配置.呵呵.自己上来总结下.
查看>>
利用windows 2003实现服务器群集的搭建与架设(一) NLB群集的创建与架设
查看>>