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>
Knockout.Js官网学习(html绑定、css绑定)的更多相关文章
- Knockout.Js官网学习(创建自定义绑定)
前言 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid ...
- Knockout.Js官网学习(系列)
1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...
- Knockout.Js官网学习(style绑定、attr绑定)
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
- Knockout.Js官网学习(selectedOptions绑定、uniqueName 绑定)
selectedOptions绑定 selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的<select>元素上. 当用户在m ...
- Knockout.Js官网学习(enable绑定、disable绑定)
enable绑定 enable绑定使DOM元素只有在参数值为 true的时候才enabled.在form表单元素input,select,和textarea上非常有用. enable简单示例 < ...
- Knockout.Js官网学习(简介)
前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...
- Knockout.Js官网学习(value绑定)
前言 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input>,<select>和<textarea>上. 当用户编辑表单 ...
- Knockout.Js官网学习(event绑定、submit绑定)
event绑定 event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数.大部分情况下是用在keypress,mouseover和mouseout上. 简 ...
- Knockout.Js官网学习(click绑定)
前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h ...
随机推荐
- Inno Setup安装、卸载时判断是否程序正在运行
var ErrorCode: Integer; IsRunning: Integer; // 安装时判断客户端是否正在运行 function InitializeSetup(): Boolean; b ...
- 利用Jersey构建REST之入门实例
一.依赖包 1.目录结构如下:
- html 去掉input 获取焦点时的边框
html中,当input标签获取焦点的时候(例如,当光标放在input框中准备输入值时), input标签外围会出现边框,有的时候我们需要去掉这个边框,可以使用css的outline:none;属性将 ...
- NSSet、NSMutableSet基本用法
NSSet.NSMutableSet基本用法 在Foundation框架中,提供了NSSet类,它是一组单值对象的集合,且NSSet实例中元素是无序,同一个对象只能保存一个. 一.不可变集合NSSet ...
- Sqoop2环境搭建
正在准备做Spark SQL external data source与关系型数据库交互的部分,参考下Sqoop2是如何操作关系型数据库的. 下载地址:http://archive.cloudera. ...
- cocos2d-lua class 方法解释
lua中没有类的概念,有的只是表(table),而类之间的继承也就是将父类的表连到了一起,派生类中没有找到的属性和方法就通过元表查找父类,在cocos2d-lua中,封装好的class方法,完美的实现 ...
- 单源最短路_SPFA_C++
当我们需要求一个点到其它所有点的最短路时,我们可以采用SPFA算法 代码特别好写,而且可以有环,但是不能有负权环,时间复杂度是O(α(n)n),n为边数,α(n)为n的反阿克曼函数,一般小于等于4 模 ...
- Android Studio实用快捷键汇总
以下是平时在Windwos系统上用Android Studio进行开发时常用到的一些快捷键,虽然不多,但是感觉都还蛮实用的,因此记录下来,如果什么时候不小心忘记了可以拿来翻一翻,That would ...
- [翻译]你不会想知道的kobject,kset,和ktypes
---------------------------------------------------------------------------------------------------- ...
- LA3211 飞机调度 Now or later-二分法&TwoSet
https://vjudge.net/problem/UVALive-3211 As you must have experienced, instead of landing immediately ...