通过css绑定,knockout.js组合动态和静态类

Question

在knockout.js中,我们可以对静态类使用css绑定

<div data-bind="css: {'translucent ': number() < 10}">static dynamic css classes</div>

和动态

<div data-bind="css: color">static dynamic css classes</div>

我已经尝试过http://jsfiddle.net/tT9PK/1/将它结合起来

css: {color, translucent: number() < 10}

同时获取动态类color和静态translucent,但是我收到错误.有没有办法做到这一点？

Answer 1

您可以通过添加动态类css属性,然后通过添加静态类attr属性

<div data-bind="attr: { 'class': color }, css: { 'translucent': number() < 10 }">
  static dynamic css classes
</div>

请务必向此绑定添加任何预定义的类 attr: { 'class': color }

请务必向此绑定添加任何预定义类(使用实际类attr添加的类). (7认同)
这个答案似乎不适用于动态类名.如果"color"observable在这里发生变化,它将删除通过"css"绑定添加的任何类.参见示例:http://jsfiddle.net/rocketmonkeys/tzj1zj31/ (7认同)
我认为`josh_bailey4`的注释应该集成在答案中,因为注意这一点非常重要,特别是在编辑已经在目标元素上具有`class`属性的现有标记时.无论如何,upvoted. (4认同)

Answer 2

我一段时间以克隆css绑定解决了这个问题css2.

 ko.bindingHandlers['css2'] = ko.bindingHandlers.css;

通常,您不能在data-bind属性中两次使用相同的绑定处理程序,因此这允许我执行以下操作:

<div data-bind="css: color, css2: { 'translucent': number() < 10 }">static dynamic css classes</div>

我不能完全决定我是否仍然喜欢这个,或@Alleksey的答案,但如果您要添加多个动态类,这可能是唯一的选择.