如何在knockoutjs中添加动态类?

时间:2013-01-10 10:09:58

标签: javascript knockout.js

让我说我有,

<span class="cls1 cls2" data-bind="title: title" ></span>

我想通过JSON对象添加另一个类

{ title: 'a', clas: 'cls3' }

这项工作,

    <span class="cls1 cls2" data-bind="attr:{title: title,'class': 'cls1 cls2'+clas}" ></span>

但问题是它会添加两个类属性。我开始需要cls1和cls2类。但是在一些事件之后需要cls3类。

3 个答案:

答案 0 :(得分:38)

您应该使用css绑定代替attr。在文档中了解更多相关信息:http://knockoutjs.com/documentation/css-binding.html

你的代码看起来像这样:

<span class="cls1 cls2" data-bind="text: title, css: myClass" ></span>

这是工作小提琴:http://jsfiddle.net/vyshniakov/gKaRF/

答案 1 :(得分:14)

使用多个类:

<span
    class="yourClass"
    data-bind="css: { myClass: (true == true), theirClass: (!true == false), ourClass: true }"
>Thine Classes</span>

答案 2 :(得分:7)

您可以使用css绑定执行此操作:

<span class="cls1 cls3" data-bind="css: clas"/>

这会将“clas”属性的值添加到元素

的当前类集合中