3.Knockout.Js(属性绑定)
前言
让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值。
简单的绑定
首先还是先定义一个ViewModel
var AppViewModel = {shouldShowMessage: ko.observable(true) ///初始化的时候div是visible的 }; AppViewModel.shouldShowMessage = ko.observable(false); ///现在hidden勒 ko.applyBindings( AppViewModel);
并且通过ko.applyBindins进行激活Knockout。
然后定义一个UI界面元素
<div data-bind="visible:shouldShowMessage">You will see this message only when "shouldShowMessage" holds a true value. </div>
运行之后此div在初始化的时候还是显示的可以,之后就被重新赋值为false,导致此div被隐藏掉了。
参数:
当参数设置为一个假值时(例如:布尔值false, 数字值0, 或者null, 或者undefined) ,该绑定将设置该元素的style.display值为none,让元素隐藏。它的优先级高于你在CSS里定义的任何display样式。
当参数设置为一个真值时(例如:布尔值true,或者非空non-null的对象或者数组) ,该绑定会删除该元素的style.display值,让元素可见。然后你在CSS里自定义的display样式将会自动生效。
如果参数是监控属性observable的,那元素的visible状态将根据参数值的变化而变化,如果不是,那元素的visible状态将只设置一次并且以后不在更新。
使用函数或者表达式来控制元素的可见性
你也可以使用JavaScript函数或者表达式作为参数。这样的话,函数或者表达式的结果将决定是否显示/隐藏这个元素。例如:
<script type="text/javascript">var AppViewModel = {shouldShowMessage: ko.observable(true), ///初始化的时候div是visible的 myValues: ko.observableArray([]) }; AppViewModel.shouldShowMessage = ko.observable(false); ///现在hidden勒 AppViewModel.myValues.push("some value"); ///向myValues数组中 添加一个项 ko.applyBindings( AppViewModel); </script>
在ViewModel中添加了一个myValues的属性值
同时给myValues的数组添加了一个项
并且在页面UI中绑定了一个元素
<div data-bind="visible: myValues().length > 0"> You will see this message only when 'myValues' has at least one member.</div>
就这样当添加完"some value"元素之后,myValues().length>0 则结果为true
那么此div就会显示出来。
前言
text 绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数。该绑定在显示<span>或者<em>上非常有用,但是你可以用在任何元素上。
简单绑定
Today's message is: <span data-bind="text: myMessage"></span> <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> <script type="text/javascript"> var viewModel = { myMessage: ko.observable() }; viewModel.myMessage("Hello, world!"); ko.applyBindings(viewModel); </script>
KO将参数值会设置在元素的innerText (IE)或textContent(Firefox和其它相似浏览器)属性上。原来的文本将会被覆盖。
如果参数是监控属性observable的,那元素的text文本将根据参数值的变化而更新,如果不是,那元素的text文本将只设置一次并且以后不在更新。
如果你传的是不是数字或者字符串(例如一个对象或者数组),那显示的文本将是yourParameter.toString()的等价内容。
使用函数或者表达式来决定text值
继续在上面的ViewModel中添加一个属性,并且添加一个依赖监控属性
price: ko.observable(24.95)viewModel.priceRating = ko.dependentObservable(function () {return this.price() > 50 ? "expensive" : "affordable"; }, viewModel);
添加一个UI页面元素进行绑定
The item is <span data-bind="text: priceRating"></span> today.
现在,text文本将在“expensive”和“affordable”之间替换,取决于价格怎么改变。
关于HTML encoding
因为该绑定是设置元素的innerText或textContent (而不是innerHTML),所以它是安全的,没有HTML或者脚本注入的风险。例如:如果你编写如下代码:
viewModel.myMessage("<i>Hello, world!</i>");
它不会显示斜体字,而是原样输出标签。如果你需要显示HTML内容,请参考html绑定.
关于IE 6的白空格whitespace
IE6有个奇怪的问题,如果 span里有空格的话,它将自动变成一个空的span。如果你想编写如下的代码的话,那Knockout将不起任何作用:
Html绑定
html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话,那非常有用。
简单示例
<div data-bind="html: details"></div> <script type="text/javascript"> var viewModel = { details: ko.observable() }; ko.applyBindings(viewModel); viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>"); </script>
这样Html 的EM标签就会显示于此
KO设置该参数值到元素的innerHTML属性上,元素之前的内容将被覆盖。
如果参数是监控属性observable的,那元素的内容将根据参数值的变化而更新,如果不是,那元素的内容将只设置一次并且以后不在更新。
如果你传的是不是数字或者字符串(例如一个对象或者数组),那显示的文本将是yourParameter.toString()的等价内容。
关于HTML encoding
因为该绑定设置元素的innerHTML,你应该注意不要使用不安全的HTML代码,因为有可能引起脚本注入攻击。如果你不确信是否安全(比如显 示用户输入的内容),那你应该使用text绑定,因为这个绑定只是设置元素的text 值innerText和textContent。
Css绑定
css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用,比如当数字变成负数时高亮显示。(注:如果你不想应用CSS class而是想引用style属性的话,请参考style绑定。)
简单示例
<p style="background: gray; color: #ffffff; font-size: 18pt;">Html绑定</p>
<script type="text/javascript"> var viewModel = { details: ko.observable(),currentProfit: ko.observable(150000) }; ko.applyBindings(viewModel); viewModel.currentProfit(-50); viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>"); </script>
运行后的效果为
记得还写了一个css样式
.profitWarning {color: red; }
该参数是一个JavaScript对象,属性是你的CSS class名称,值是比较用的true或false,用来决定是否应该使用这个CSS class。
你可以一次设置多个CSS class。例如,如果你的view model有一个叫isServre的属性,
<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">
如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的CSS class。如果不是,那CSS class将会只添加或者删除一次并且以后不在更新。
你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除CSS class。
应用的CSS class的名字不是合法的JavaScript变量命名
如果你想使用my-class class,你不能写成这样:
<div data-bind="css: { my-class: someValue }">...</div>
因为my-class不是一个合法的命名。解决方案是:在my-class两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说,你任何时候都应该这样使用,虽然不是必须的)。例如
<div data-bind="css: { 'my-class': someValue }">...</div>
Style绑定
style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。(注:如果你不是应用style值而是应用CSS class的话,请参考CSS绑定。)
Style简单示例
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">Profit Information </div> <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> <script type="text/javascript"> var viewModel = { currentProfit:ko.observable(15000) }; viewModel.currentProfit(-50); ko.applyBindings(viewModel); </script>
简单示例代码,运行后发现为红色的字体
当currentProfit 小于0的时候div的style.color是红色,大于的话是黑色。
该参数是一个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值。
应用的style的名字不是合法的JavaScript变量命名
如果你需要应用font-weight或者text-decoration,你不能直接使用,而是要使用style对应的JavaScript名称。
错误: { font-weight: someValue }; 正确: { fontWeight: someValue }
错误: { text-decoration: someValue }; 正确: { textDecoration: someValue }
参考:style名称和对应的JavaScript 名称列表
attr绑定
attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性,连接的href属性。使用绑定,当模型属性改变的时候,它会自动更新。
attr绑定简单示例
<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") }; ko.applyBindings(viewModel); </script>
运行后效果为
呈现结果是该连接的href属性被设置为year-end.html, title属性被设置为Report including final year-end statistics
该参数是一个JavaScript对象,属性是你的attribute名称,值是该attribute需要应用的值。
如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的attribute值。如果不是,那attribute值将会只应用一次并且以后不在更新。
应用的属性名字不是合法的JavaScript变量命名
如果你要用的属性名称是data-something的话,你不能这样写:
<div data-bind="attr: { data-something: someValue }">...</div>
因为data-something 不是一个合法的命名。解决方案是:在data-something两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说,你任何时候都应该这样使用,虽然不是必须的)。例如
<div data-bind="attr: { ‘data-something’: someValue }">...</div>
转载于:https://www.cnblogs.com/TF12138/p/4156898.html
3.Knockout.Js(属性绑定)相关推荐
- knockout+html绑定,Knockout.Js官网学习(style绑定、attr绑定)
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
- Ember.js 入门指南——handlebars属性绑定
2019独角兽企业重金招聘Python工程师标准>>> 本文从http://www.ibeginer.sinaapp.com迁移过来,欢迎访问原页面. 简单讲属性绑定其实就是在HTM ...
- Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式 点击按钮 ...
- Knockout.js学习笔记----绑定
1.Visible绑定 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏: <div data-bind="visible: shouldShowMessage"& ...
- JQuery Ajax 与 Knockout.js的结合
项目中遇到太多JQuery Ajax 与 Knockout.js的结合来处理数据的情况,今天将这部分内容梳理一下.一来弄清楚二者结合处理数据的流程,二来是感觉二者结合在一起用的时候有点将二者搞混了,弄 ...
- 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI
[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP ...
- Knockout.Js案例一Introduction
在这第一个教程中,您将体验的一些基本知识构建的web UI Model-View-ViewModel使用knockout.js(MVVM)模式. 案例1:添加:data-bind <p>F ...
- MVVM(Knockout.js)的新尝试:多个Page,一个ViewModel
对于面向数据的Web应用来说,MVVM模式是一项不错的选择,它借助JS框架提供的"绑定"机制是我们无需过多关注UI(HTML)的细节,只需要操作绑定的数据源.MVVM最早被微软应用 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录...
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- Knockout.js 初探
Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的 ...
最新文章
- java调用python的函数_java如何调用python的.py文件,以及如何执行里面的函数,和创建...
- QIIME 2教程. 31名词Glossary(2021.2)
- token要加编码decode吗_NLP中各种各样的编码器
- XAPIAN简单介绍(三)
- [Java并发编程(二)] 线程池 FixedThreadPool、CachedThreadPool、ForkJoinPool?为后台任务选择合适的 Java executors...
- FPGA的发展历史及相关名词解释
- 技嘉主板万能网卡驱动_技嘉Z490系列主板来袭:16相供电/钽电容,堆料更进一步...
- 听腾讯 TEG 大佬谈腾讯万亿级 Elasticsearch 技术解密
- Visual Studio 安装失败
- 小米要用 AI + IoT 做年轻人的第一套智能家居
- Canvas的绚烂起点
- excelexportentity中设置null不显示的方法_如何在 Creator3D 中切换模型贴图,超级简单!...
- 基于矩阵分解的隐因子模型
- 直观理解积分-从零开始:机器学习的数学原理和算法实践
- 互联网黑暗森林法则:想活?别喘气儿!
- led灯光衰怎么解决_揭秘LED灯具光衰原因
- 计算机如何将两个磁盘合在一起,如何把两个磁盘合并在一起?
- win 10 caffe python=3.5 小白安装全过程(最详细,完美解决各种版本不兼容等问题)
- 车载5G+4G多网聚合通信解决方案
- org.apache.http.conn.HttpHostConnectException: Connect to sonatype-download.global.ssl.fastly.net:44
热门文章
- 智慧能源管理控制系统项目软件供应商
- OSChina 周二乱弹 —— 这样成功要到小护士姐姐的微信
- Tomcat5.5链接Oracle、DB2、MySQL数据源实现JSP下拉框的填充
- AVFoundation 零碎知识
- Python标准模块--multiprocessing
- MongoDBTool - 测试版【GUI美化完毕】 源代码发布 --MongoDB爱好者,Winform爱好者 请进...
- SoundPool的sample 1 not READY问题
- android UI进阶之仿iphone的tab效果
- Q95:纹理映射(Texture Mapping)(2)——圆柱面
- Hive常见函数大全