Knockout.Js官网学习(text绑定)
2023-09-11 14:22:04 时间
Knockout.Js官网学习(text绑定)
前言
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将不起任何作用:
导航
2.Knockout.Js官网学习(监控属性Observables)
相关文章
- face-api.js 学习笔记
- 开箱即用的深度学习工具 -- TensorFlow.js
- js待学习
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- JS(JQuery)中取出当日期第N天的日期或年月日。
- 利用JS最真实的模拟鼠标点击
- GIS-012-ArcGIS JS API 绘图
- JS模式:jq中简单的模式--》采摘自js设计(tomxu_version)
- 《Node.js入门经典》一1.3 安装并创建第一个Node.js程序
- 《D3.js数据可视化实战手册》——2.7 处理原始选集
- 《JavaScript机器人编程指南》——第1章 开始学习JS机器人技术
- 基于VUE+Node.JS实现(Web)学生组队网站【100010163】
- js 父窗口与子窗口交互
- 原生JS无缝轮播图
- vue项目mixin.js的使用及注意详解
- 【零基础学JS -3】深入剖析script标签
- js的深入学习课程Object.prototype.toString.call()
- 浅析JavaScript如何检测文件的类型:区分文件类型的本质、关于魔数的理解、input accept文件检测存在的问题、如何检测修改后缀名后的文件类型、推荐一个文件检测JS库-file-type库及其检测原理
- React.js 开发常见问题
- 关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项
- JS学习第11天——函数进阶(this指向、严格模式、高阶函数、闭包、递归)
- Knockout.Js官网学习(text绑定)
- Three.js学习-相机Camera的基本操作(了解向)