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 hiddenviewModel.shouldShowMessage(true); // ... now it's visible again </script>
View Code
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>
View Code
注意事项
注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>
View Code
注意事项
关于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 }">
View Code
非布尔值会被解析成布尔值。例如, 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(150000)// Positive value, so initially we don't apply the "profitWarning" class };viewModel.currentProfit(-50);// Causes the "profitWarning" class to be applied </script>
View Code
注意事项
应用的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>
View Code
如果参数是监控属性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(150000) // Positive value, so initially black };viewModel.currentProfit(-50); // Causes the DIV's contents to go red </script>
View Code
注意事项
应用的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>
View Code
注意事项
应用的属性名字不是合法的JavaScript变量命名
转载于:https://www.cnblogs.com/birdwawe/p/4070822.html
KnockoutJS(4)-控制文本和外观绑定相关推荐
- ggplot2中显示坐标轴_ggplot2作图:修改图中一切文本的外观
参考:<R数据可视化手册> 文本者,ggplot2中的文字也. 包括:1.坐标轴标签 2.标题 3.手动添加文本 4.映射数据的文本等 一.修改坐标轴标签外观: 使用theme(axis. ...
- R语言ggplot2可视化柱状图添加数值说明并控制文本、数值字体大小、轴标签字体大小实战
R语言ggplot2可视化柱状图添加数值说明并控制文本.数值字体大小.轴标签字体大小实战 目录
- js控制文本框仅仅能输入中文、英文、数字与指定特殊符号
JS 控制文本框仅仅能输入数字 <input οnkeyup="value=value.replace(/[^0-9]/g,'')"οnpaste="value=v ...
- “高级”CSS样式一般应用于控制网页内容的外观。附加样式表分为内嵌样式表和外部样式表两种方式。
"高级"CSS样式一般应用于控制网页内容的外观.附加样式表分为内嵌样式表和外部样式表两种方式.
- css控制文本超出省略(单行、两行、多行)
想要控制文本长度? 想要文本超出隐藏? 还想要不用JavaScript实现? 让我们来用css试试吧~ 本文重点 css控制文本超出省略.完成单行.两行.多行的效果 注意点 本文提到的方法 都需要控制 ...
- CSS控制文本超出打点显示
CSS控制文本超出打点显示 1 单行文本过长打点 2 多行文本打点显示 3 涉及的属性 3.1 white-space 3.2 text-overflow 1 单行文本过长打点 只有1行文本时,需要满 ...
- css控制文本的行高
line-height可以控制文本的行高 示例 <p> 这是一个标准行高的段落. 在大多数浏览器默认行高约20 px. 这是一个标准行高的段落. 这是一个标准行高的段落. </p&g ...
- JS 控制文本框只能输入中文、英文、数字与指定特殊符号(屏蔽表情输入)
onkeyup:释放键盘事件 onpaste:粘贴事件 oncontextmenu :鼠标右击事件 控制这三种事件的输入 οnkeyup="this.value=this.value.rep ...
- C# e.Handled的用法,控制文本框键盘输入
e.Handled:获取或设置一个值,该值指示是否处理过此事件. e.Handled:多用在过滤某些事件,比如键盘按键 ①如要求文本框只能输入数字,那么当输入的是字母,则e.handled=true即 ...
- js符号输入不可用_js控制文本框禁止输入特殊字符详解
在开发难免遇到一些前端需要验证输入的数据是否合法的问题,收集分享在这里同学们使用,欢迎补充. 1.标签上直接替换方法: JS 控制不能输入特殊字符 this.value=this.value.repl ...
最新文章
- 教你用webpack搭一个vue脚手架[超详细讲解和注释!]
- java 实现斐波切纳数列,求解这个算斐波切纳兔子有关问题的算法错哪了(和stl迭代器貌似有点关系)...
- 字典-变量的定义以及应用场景
- Spring笔记③--spring的命名空间
- pytorch模型加载测试_pytorch模型加载方法汇总
- 【转】MS-DOS下怎样使用解压缩共具
- 2016 年最值得程序员阅读的开源书:《全栈增长工程师指南》
- 查看计算机上隐藏用户,教你如何隐藏windows系统账户
- C++ plus Primer 第六版中文版 带书签的 PDF
- 前言:智能车制作的那些事
- JS生成二维码图片并下载,可带logo
- 2021-2027全球与中国铂金芯片温度传感器市场现状及未来发展趋势
- IIS发布网站后网页样式丢失
- python爬虫篇,零基础学爬虫之精华版
- 盘点一下分布式模式下的服务治理和监控优化方案
- MS Office 开发工具--VBA
- 荣耀3路由器设置虚拟服务器,荣耀路由3怎么设置上网?(电脑)
- Python_封装案例(小明爱跑步)
- 【系统分析师之路】2011年系统分析师下午案例分析真题
- 转:资本2010《CCTV财经频道中国证券市场投资策略报告》发布