Knockout.Js官网学习(style绑定、attr绑定)
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 }
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>
Knockout.Js官网学习(style绑定、attr绑定)的更多相关文章
- Knockout.Js官网学习(创建自定义绑定)
前言 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid ...
- Knockout.Js官网学习(系列)
1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...
- Knockout.Js官网学习(selectedOptions绑定、uniqueName 绑定)
selectedOptions绑定 selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的<select>元素上. 当用户在m ...
- Knockout.Js官网学习(html绑定、css绑定)
Html绑定 html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数.如果在你的view model里声明HTML标记并且render的话,那非常有用. 简单示例 <div dat ...
- 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 ...
随机推荐
- C语言中fseek函数
C语言fseek()函数:用来设定文件的当前读写位置 头文件: #include <stdio.h> 定义函数: int fseek(FILE * stream, long offset, ...
- [SQL]不知道1
表结构,companyid是公司名,productid是产品号,说明每个公司生产多少种产品. companyid productid A A B B B C D D D 要求:取出所有生产的产品包含公 ...
- ContextLoaderListener与DispatcherServlet所加载的applicationContext的区别
spring通过在web.xml 中配置ContextLoaderListener 来加载context配置文件,在DispatcherServlet中也可以来加载spring context配置文件 ...
- Goldengate trial队列维护
查看进程信息: Info replicat_name $Info replicat_name showch 注: 可以查看到详细的关于checkpoint的信息,用于查看GoldenGate进程处 ...
- Configuring HugePages for Oracle on Linux (x86-64)
Introduction Configuring HugePages Force Oracle to use HugePages (USE_LARGE_PAGES) Disabling Transpa ...
- spi驱动无法建立spidev问题
参考这里: http://e2e.ti.com/support/arm/sitara_arm/f/791/t/168122.aspx http://communistcode.co.uk/blog/b ...
- 剑指Offer:面试题12——打印1到最大的n位数(java实现)
问题描述: 输入数字n,按顺序打印出从1到最大的n位十进制数,比如输入3,则打印出1,2,3一直到最大的3位数即999. 思路1:最简单的想法就是先找出最大的n位数,然后循环打印即可. public ...
- 如何让 Drupal 使用 Wordpress 形式的编辑代码?
如果你曾有过将 Wordpress 网站迁移到 Drupal 的经验,很可能客户会问的第一件事就是如何为 Drupal 添加编辑代码. Wordpress 中的 Shortcodes 插件让使用者可以 ...
- com组件 Ieframe的主页锁定
CLSID 里的ieframe的 shell OpenHomePage-> Command的默认项"C:\Program Files (x86)\Internet Explorer\i ...
- sql server查询出的结果中添加一列序列行
select row_number()over(order by id) as rownum ,[UserName] ,[Password] ,[Mobile] ,[Email] ,[Sex] ,[C ...