KnockoutJS(4)-控制文本和外观绑定
控制文本和外观绑定
依赖关系:除了Knockout核心库之外,无依赖关系。
类别 |
目的 |
Visible绑定 |
Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 |
Text绑定 |
Text绑定主要是让DOM元素显示参数值。 通常情况下,该绑定在<span>和<em>这样的元素上非常有用,而实际上你可以绑定任何元素。 |
html 绑定 |
html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话,那非常有用。 |
CSS Binding(CSS类名绑定) |
css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用,比如当数字变成负数时高亮显示。(注:如果你不想应用CSS class而是想引用style属性的话,请参考style绑定。) |
Style Binding(Style属性绑定) |
style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。(注:如果你不是应用style值而是应用CSS class的话,请参考CSS绑定。) |
Attr Binding(attr属性绑定) |
attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性,连接的href属性。使用绑定,当模型属性改变的时候,它会自动更新。 |
1. Visible绑定
参数
主参数
当参数设置为一个假值(例如bool型值false、整型值0、null或者undefined)时,该绑定会设置yourElement.style.display为 none,让元素隐藏。它的优先级高于任何你在CSS中定义的隐藏样式。
当参数设置为一个真值(例如bool型值true、不等于null、Object对象或数组)时,该绑定会去掉yourElement.style.display值,让元素显示。
注意,任何你在CSS中定义的样式会立即应用生效。
如果参数是一个observable值,visible绑定使得元素的visible状态随着参数值的变化而变化。如果参数不是observable值,visible绑定仅仅会设置元素visible状态一次,以后不会再更新。
其他参数
无
注:使用函数或表达式来控制元素显示隐藏
你可以选择使用JavaScript函数或者表达式作为参数值。这样的话,KO将会运行你的函数或者表达式,返回的结果来控制元素显示或者隐藏。
示例
<div data-bind="visible: shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div> <script type="text/javascript">
var viewModel = {
shouldShowMessage: ko.observable(true) // Message initially visible
};
viewModel.shouldShowMessage(false); // ... now it's hidden
viewModel.shouldShowMessage(true); // ... now it's visible again
</script>
2. Text绑定
参数
主要参数
Knockout将参数值设置为元素内容。元素之前的内容将会被覆盖。
如果参数是一个observable值,text绑定将会在值变化时更新元素text内容。如果参数不是observable值,text绑定仅仅会设置元素内容一次,以后不会再更新。
如果你传入的不是一个值或者一个字符串(比如:你传入一个对象或者数组)那么显示的文本将是yourParameter.toString()的结果。
其他参数
无
示例
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>
注意事项
注1:使用函数或表达式来决定text值
如果你想text值可编程化,一种选择是创建计算属性,然后在运算函数中编码决定text中显示什么。
注2:关于HTML编码
由于text绑定是利用元素的text节点属性来设置文本值,你可以很安全的设置任何内容而不用担心HTML和脚本注入风险。
注3:使用“text”而没有一个容器元素
有时你可能需要使用Knockout在不使用多余的元素的情况下通过text绑定来设置文本内容。例如,在option元素中是不允许存在其他元素的,所以下面的绑定是无法正常工作的。
注4:一个关于IE6 白空格
IE6有一个奇怪的现象,如果span有空格的话,它会变成一个空span,如果你编写以下代码,Knockout不会起任何作用。
IE6不会显示span中间的那个空格,如果你想避免这个问题,你可以在<span>中输入任意内容。
其他浏览器或者版本较新的IE浏览器不会出现这个问题。
3. html 绑定
参数
主参数
KO设置该参数值到元素的innerHTML属性上,元素之前的内容将被覆盖。
如果参数是监控属性observable的,那元素的内容将根据参数值的变化而更新,如果不是,那元素的内容将只设置一次并且以后不在更新。
如果你传的是不是数字或者字符串(例如一个对象或者数组),那显示的文本将是yourParameter.toString()的等价内容。
其它参数
无
示例
<div data-bind="html: details"></div> <script type="text/javascript">
var viewModel = {
details: ko.observable() // Initially blank
}; viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
// HTML content appears
</script>
注意事项
关于HTML encoding
因为该绑定设置元素的innerHTML,你应该注意不要使用不安全的HTML代码,因为有可能引起脚本注入攻击。如果你不确信是否安全(比如显示用户输入的内容),那你应该使用text绑定,因为这个绑定只是设置元素的text 值innerText和textContent。
这个绑定的功能与text binding相对应,不同点为:
- 控制DOM元素的innerHtml属性
不会对内容进行Html编码,你可以定义自己的html标签注入进去.
4. CSS Binding(CSS类名绑定)
参数
主参数
该参数是一个JavaScript对象,属性是你的CSS class名称,值是比较用的true或false,用来决定是否应该使用这个CSS class。
你可以一次设置多个CSS class。例如,如果你的view model有一个叫isServre的属性,
<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">
非布尔值会被解析成布尔值。例如, 0和null被解析成false,21和非null对象被解析成true。
如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的CSS class。如果不是,那CSS class将会只添加或者删除一次并且以后不在更新。
你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除CSS class。
其它参数
无
示例
<div data-bind="css: { profitWarning: currentProfit() < 0 }">
Profit Information
</div> <script type="text/javascript">
var viewModel = {
currentProfit: ko.observable()
// Positive value, so initially we don't apply the "profitWarning" class
}; viewModel.currentProfit(-);
// Causes the "profitWarning" class to be applied
</script>
注意事项
应用的CSS class的名字不是合法的JavaScript变量命名
5. Style Binding(Style属性绑定)
参数
主参数
该参数是一个JavaScript对象,属性是你的style的名称,值是该style需要应用的值。
你可以一次设置多个style值。例如,如果你的view model有一个叫isServre的属性,
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">...</div>
如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的style值。如果不是,那style值将会只应用一次并且以后不在更新。
你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除style值。
其它参数
无
示例
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
Profit Information
</div> <script type="text/javascript">
var viewModel = {
currentProfit: ko.observable() // Positive value, so initially black
};
viewModel.currentProfit(-); // Causes the DIV's contents to go red
</script>
注意事项
应用的style的名字不是合法的JavaScript变量命名
6. Attr Binding(attr属性绑定)
参数
主参数
该参数是一个JavaScript对象,属性是你的attribute名称,值是该attribute需要应用的值。
如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的attribute值。如果不是,那attribute值将会只应用一次并且以后不在更新。
其它参数
无
示例
<a data-bind="attr: { href: url, title: details }">
Report
</a> <script type="text/javascript">
var viewModel = {
url: ko.observable("year-end.html"),
details: ko.observable("Report including final year-end statistics")
};
</script>
注意事项
应用的属性名字不是合法的JavaScript变量命名
KnockoutJS(4)-控制文本和外观绑定的更多相关文章
- knockoutJS学习笔记05:控制文本和外观绑定
测试数据: function Person(name,age){ var self = this; self.name = ko.observable(name); self.age = ko.obs ...
- Knockout学习之文本和外观绑定器
文本和外观绑定器 “visible”绑定 该绑定主要用来让我们通过监控属性可以控制html文档的显示,只要绑定的监控属性为false.0.null或者undefined则隐藏该标签,否则显示.比如下面 ...
- 控制文本和外观------Attr Binding(attr属性绑定)
Attr Binding(attr属性绑定) 目的 attr 绑定提供了一种方式可以设置DOM元素的任何属性值.你可以设置img的src属性,连接的href属性.使用绑定,当模型属性改变的时候,它会自 ...
- 控制文本和外观------CSS Binding(CSS类名绑定)
<style> .myColor{color:red;font-size:13px} .yourColor{color:green;font-size:34px}</style> ...
- 控制文本和外观------Style Binding(Style属性绑定)
目的 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS class的话,请 ...
- (二)Knockout 文本与外观绑定
Visible Visible binding会依据绑定的数据来决定相应的DOM元素是否隐藏,hidden或visible. 我们首先在js文件部分定义一个view model,这里我创建的是一个ob ...
- Knockout v3.4.0 中文版教程-10-绑定-控制文本内容和外观-visible绑定
4.绑定 1. 控制文本内容和外观 1. visible绑定 目的 visible绑定可以根据你传入绑定的值控制关联的DOM元素显示或隐藏. 例子 <div data-bind="vi ...
- HTML 教程延伸阅读:改变文本的外观和含义
很多标签都可以用来改变文本的外观,并为文本关联其隐藏的含义.总地来说,这些标签可以分成两类:基于内容的样式(content-based style)和物理样式(physical style). 基于内 ...
- js控制文本框只能输入中文、英文、数字与指定特殊符号.
先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...
随机推荐
- 文献阅读笔记——group sparsity and geometry constrained dictionary
周五实验室有同学报告了ICCV2013的一篇论文group sparsity and geometry constrained dictionary learning for action recog ...
- flash 入门课知识小结
一. 几种类型帧的小结:(关键帧.空白关键帧.普通帧)1. 特点 帧——是进行flash动画制作的最基本的单位,每一个精彩的flash动画都是由很多个精心雕琢的帧构成的,在时间轴上的每一帧都可以包含 ...
- android151 笔记 3
34. 对android虚拟机的理解,包括内存管理机制垃圾回收机制. 虚拟机很小,空间很小,谈谈移动设备的虚拟机的大小限制 16M , 谈谈加载图片的时候怎么处理大图片的,压缩. 垃圾回收,没有引用的 ...
- 隐藏gvim中的工具栏和菜单栏
在vim的配置文件.vimrc中添加如下代码: "Toggle Menu and Toolbar set guioptions-=m set guioptions-=T map <si ...
- weblogic 10域结构
Domain Directory Contents By default, Oracle WebLogic Server creates domain directories under Oracle ...
- Linux内核初始化定义
转载:http://blog.csdn.net/beatbean/article/details/8448623 1. Compile宏控制 位于include/linux/init.h /* The ...
- C# 正则表达式 学习笔记二
1.身份证格式验证(不保证有效性) * 身份证15位编码规则:dddddd yymmdd xx p * dddddd:6位地区编码 * yymmdd: 出生年(两位年)月日,如:910215 ...
- AES 加解密
// // NSData+AES.h // Smile // // Created by 蒲晓涛 on 12-11-24. // Copyright (c) 2012年 BOX. All rights ...
- pycharm中文乱码的问题
这几天一直挺困扰的是使用pycharm之后一直对中文的乱码,即使添加了很多别人说的类似于#coding:utf-8的语句但是还是报错,让我抓狂,但是今天终于找到了解决的办法,还真的是让人很高兴啊,哈哈 ...
- [改善Java代码]正确使用String,StringBuffer,StringBuilder
CharSequence接口有三个实现类与字符串有关:String,StringBuffer,StringBuffer.虽然它们都与字符串有关,但是其处理机制是不同的. String类是不可改变的量, ...