专栏首页技术博客Knockout.Js官网学习(style绑定、attr绑定)

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 }

参考: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>

运行后效果为

呈现结果是该连接的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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 获取屏幕的高度和宽度

    screen.availHeight:显示浏览器的屏幕的可用高度(这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。)

    aehyok
  • ExtJs六(ExtJs Mvc首页展示)

    要区分登录前和登录后,判断Request的IsAuthenticated方法就可以。因为要通过服务器段代码执行不同的脚本,因而要将Loder这些公共代码抽出来独...

    aehyok
  • JavaScript判断页面是否已经加载完毕

      在做针对CheckBox框点击事件的时候,发现点击以后有时候会报错,但是是生成的JavaScript的代码的内部错误,无法判断到底是什么地方有问题。就一直在...

    aehyok
  • 「R」R 的属性和类

    属性描述了对象所代表的内容以及R解释该对象的方式。很多时候两个对象之间的唯一差别就在于它们的属性不同。下表展示了一些重要的属性。很多常见的属性都是针对常见的数值...

    王诗翔呀
  • Vue.js自定义tipOnce指令用法实例

    vuejs自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的...

    张炳
  • 面向对象的JavaScript代码

    人类非常善于将东西归类。编程中有一种数据类型叫对象,就是一种将数据的行为和数据本身归类的方法。这样能帮助设计并理解大段的代码。事实上,面向对象的编程方法在许多程...

    疯狂的技术宅
  • 微软已确认收购 GitHub!网友们这样说……

    GitHub 倾向于将公司出售给上市公司,之所以选择微软,是因为对其 CEO Satya Nadella 印象深刻。去年 8 月份,GitHub 的联合创始人兼...

    华章科技
  • JS魔法堂:再识IE的内存泄露

    一、前言                               IE6~8除了不遵守W3C标准和各种诡异外,我想最让人诟病的应该是内存泄露的问题了。这阵子...

    ^_^肥仔John
  • 前端入门7-JavaScript语法之相关术语声明正文-相关术语

    作为一个前端小白,入门跟着这几个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

    请叫我大苏
  • 饭团开通一周,3人学会了比特币操作

    最近比特币行情火爆,很多人听到此消息后全当作泡沫,没有绿灯思维。而有少许人则去快速学习区块链的相关知识,去探寻它背后的本质规律。每一个新技术的出现都会颠覆许多已...

    申龙斌

扫码关注云+社区

领取腾讯云代金券