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)
相关文章
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
- JS框架_(JQuery.js)图片相册掀开切换效果
- Node.js入门学习笔记
- js 格式化数字
- JS插件之——bootstrap-suggest.js
- [Next.js] Serve Optimized Images Using the Next.js Image Component
- 让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]
- vue.js 3.2.22:菜单每行依次滑动出现的动画
- How does framework require TechnicalInfo.js
- rxjs 里的subscribeToArray.js
- 华为OD机试 - 匿名信(Java & JS & Python)
- 原生js实现随机验证码HTMl-JS
- js中forEach,for in,for of循环的用法和区别(一个比较神奇的例子)
- js面向对象学习
- 第58篇 QML 之 JS类型转换为 String 类型
- js加密转python3
- JS:crypto-js模块实现数据加密解密
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
- (二)js选择结构
- 003-js-MD5
- JS赋值运算符详解
- Node.js学习笔记——接口
- Node.js学习笔记——nvm
- Node.js学习笔记——包管理工具