Knockout.Js官网学习(style绑定、attr绑定)
2016-10-27 15:19
741 查看
Style绑定
style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。(注:如果你不是应用style值而是应用CSS class的话,请参考CSS绑定。)
Style简单示例
简单示例代码,运行后发现为红色的字体
![](https://images0.cnblogs.com/blog/401119/201310/12132857-8971ac1aadb544b49020362c1b7bc716.png)
当currentProfit 小于0的时候div的style.color是红色,大于的话是黑色。
该参数是一个JavaScript对象,属性是你的style的名称,值是该style需要应用的值。
你可以一次设置多个style值。例如,如果你的view model有一个叫isServre的属性,
如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的style值。如果不是,那style值将会只应用一次并且以后不在更新。
你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除style值。
应用的style的名字不是合法的JavaScript变量命名
如果你需要应用font-weight或者text-decoration,你不能直接使用,而是要使用style对应的JavaScript名称。
错误: { font-weight: someValue }; 正确: { fontWeight: someValue }
错误: { text-decoration: someValue }; 正确: { textDecoration: someValue }
参考:style名称和对应的JavaScript 名称列表
attr绑定
attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性,连接的href属性。使用绑定,当模型属性改变的时候,它会自动更新。
attr绑定简单示例
运行后效果为
![](https://images0.cnblogs.com/blog/401119/201310/12134041-e36da2c71740446086a5cb8351bc895e.png)
呈现结果是该连接的href属性被设置为year-end.html, title属性被设置为Report including final year-end statistics
该参数是一个JavaScript对象,属性是你的attribute名称,值是该attribute需要应用的值。
如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的attribute值。如果不是,那attribute值将会只应用一次并且以后不在更新。
应用的属性名字不是合法的JavaScript变量命名
如果你要用的属性名称是data-something的话,你不能这样写:
因为data-something 不是一个合法的命名。解决方案是:在data-something两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说,你任何时候都应该这样使用,虽然不是必须的)。例如
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>
简单示例代码,运行后发现为红色的字体
![](https://images0.cnblogs.com/blog/401119/201310/12132857-8971ac1aadb544b49020362c1b7bc716.png)
当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 }
参考:style名称和对应的JavaScript 名称列表
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>
运行后效果为
![](https://images0.cnblogs.com/blog/401119/201310/12134041-e36da2c71740446086a5cb8351bc895e.png)
呈现结果是该连接的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官网学习(selectedOptions绑定、uniqueName 绑定)
- Knockout.Js官网学习(创建自定义绑定)
- Knockout.Js官网学习(visible绑定)
- Knockout.Js官网学习(event绑定、submit绑定)
- Knockout.Js官网学习(click绑定)
- Knockout.Js官网学习(enable绑定、disable绑定)
- Knockout.Js官网学习(options绑定)
- Knockout.Js官网学习(value绑定)
- Knockout.Js官网学习(text绑定)
- Knockout.Js官网学习(value绑定)
- Knockout.Js官网学习(模版绑定)
- Knockout.Js官网学习(创建自定义绑定)
- Knockout.Js官网学习(options绑定)
- Knockout.Js官网学习(event绑定、submit绑定)
- Knockout.Js官网学习(value绑定)
- Knockout.Js官网学习(html绑定、css绑定)
- Knockout.Js官网学习(checked 绑定)
- Knockout.Js官网学习(visible绑定)
- Knockout.Js官网学习(text绑定)