在ember.js车把模板中,有没有一种方法可以具有静态和动态类属性?
-
26-10-2019 - |
题
使用已经经过的待办事项示例,假设我想要一个带有“ todo”类(静态)和“ is-done”类(Dynamic)的元素:
<div {{bindAttr class="todo isDone"}}>
Other stuff in here
</div>
在这种情况下,“ isdone”和“ todo”都被期望是我的视图对象上的属性,这是我想要的“ isdone”,而不是“ todo”。目前,我在视图上添加一个“ todo”属性等于静态“ todo”字符串,从而解决此问题。使用BindAttr时,有什么方法可以具有静态类属性?
小提琴示例: http://jsfiddle.net/nes4h/4/
解决方案
编辑:
我们已经在Ember中修复了!
在从主人或0.9.6发布后的构建中,您现在可以做:
<div {{bindAttr class="App.foo:a-bound-class :a-static-class"}}></div>
上一个答案:
不幸的是,您在使用时不能同时具有静态和动态类名称 bindAttr
.
我建议您在视图上使用一个或多个计算的属性来输出静态和动态类名称。
支持静态和动态的班级名称非常好,但是方式 bindAttr
目前有效,这是不可能的。 bindAttr
关于在模板汇编过程中所附加到的元素一无所知。
其他提示
我不知道您是否可以使用bindattr做到这一点,但是 #view
帮助您可以设置静态类和动态类别:
{{#view App.TodoView class="todo" classBinding="isDone"}}
inner content
{{/view}}
在Ember Master中,今天承诺进行更改,以允许在 bindAttr
通过准备结肠。
https://github.com/emberjs/ember.js/commit/ce385E3294BE019215C5555511C7F393AEBC02E41
当然,这可能会在下一个版本之前发生变化,但这是Ember Core团队想要解决的问题。
在Ember 1.10.0中,Bindattr被弃用。您可以将变量直接绑定到DIV类。在这里,颜色变量与DIV的类绑定:
<div class="{{color}}"></div>
在这些情况下也可以使用内联助手:
<div class="{{color}} {{if isEnabled 'active' 'disabled'}}"></div>