前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Knockout.Js官网学习(style绑定、attr绑定)

Knockout.Js官网学习(style绑定、attr绑定)

作者头像
aehyok
发布2018-09-11 13:04:36
3.9K0
发布2018-09-11 13:04:36
举报
文章被收录于专栏:技术博客

Style绑定

style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。(注:如果你不是应用style值而是应用CSS class的话,请参考CSS绑定。)

Style简单示例

代码语言:javascript
复制
<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的属性,

代码语言:javascript
复制
<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绑定简单示例

代码语言:javascript
复制
<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的话,你不能这样写:

代码语言:javascript
复制
<div data-bind="attr: { data-something: someValue }">...</div>

 因为data-something 不是一个合法的命名。解决方案是:在data-something两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说,你任何时候都应该这样使用,虽然不是必须的)。例如

代码语言:javascript
复制
<div data-bind="attr: { ‘data-something’: someValue }">...</div>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2013-10-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档