Knockout.Js官网学习(html绑定、css绑定)
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>
相关文章
- JS框架_(JQuery.js)模拟刮奖
- JS框架_(coolShow.js)图片旋转动画特效
- JS框架_(JQuery.js)动画效果鼠标跟随
- 纯JS为DOM添加html字符串:appendHTML方法和prependHTML方法
- 一行命令搞定node.js 版本升级
- 在引入的css或者js文件后面加参数的作用
- JS编辑器获取选择内容的HTML多浏览器兼容性写法(支持Chorme、Firefox)
- [FE] Quasar 性能优化: 减小 vendor.js 尺寸
- atitit.js的 字符串内容 转义 js处理html
- atitit.按钮光标滑过高亮切换以及其他动态效果的实现css html js --attilax总结
- 华为OD机试 - 补种未成活胡杨(Java & JS & Python)
- JS:Smart HTML Elements R1 2023 (15.0.0) Crack
- html+css+js实现点球球小游戏
- 一文搞懂如何使用Node.js进行TCP网络通信
- js检测dom元素的变化
- 阅读zepto.js的core中的Core methods
- 使用live delegate on解决js后装html故障问题
- 用JS简单地控制HTML中 img 标签 的 max-width 的办法
- Web前端 | HTML嵌入JS代码的三种方式
- html + css + js使用HBuilder开发工具做2048益智游戏