Question

弃用bind-attr以支持类名绑定的句柄if语句;如何将多个类名绑定到元素？

文档指定单个绑定类名的语法，但不指定多个：

http://guides.emberjs.com/v1.13.0/templates/binding-element-class-names/

<div class={{if isEnabled 'enabled' 'disabled'}}>
    Warning!
</div>

导致（isEnabled=true时）：

<div class="enabled"}}>
    Warning!
</div>

但是如果我需要将其他类名绑定到这个元素呢？我试过了：

<div class={{if isEnabled 'enabled' 'disabled'}}{{if isNew 'new' 'old'}}>
    Warning!
</div>

和（有和没有分号）......

<div class={{if isEnabled 'enabled' 'disabled'; if isNew 'new' 'old'}}>
    Warning!
</div>

第一个是最后的胜利，第二个甚至不编译。

Answer 1

在halt init 0 reboot帮助者周围加上引号：

{{if}}

你也可以写一个帮手为你做一些工作。

作为参考，1.11 release blog post中提到了这一点。

Answer 2

与框架中的许多内容一样，您可以通过多种方式执行此操作

1）你可以让它们内联

<div class="{{if isTrue 'red' 'blue'}} {{if isAlsoTrue 'bold' 'underline'}}">
    I have both classes
</div>

有些人可能认为这就是用逻辑压倒你的模板的边缘。我不会以这种方式对你造成错误，因为它只有两个类，但是当你扩展你的项目时，你可能想要考虑选项2 ......

2）您可以使用组件的classNameBindings

<script type="text/x-handlebars" id="components/my-cool-dealy">
    <span>I love JSFiddle</span>
</script>


App.MyCoolDealyComponent = Ember.Component.extend({
    classNameBindings: ['category', 'priority'],
    category: function() {
        //logic here
        return "blue";
    }.property(),
    priority: function() {
        //logic here
        return "underline";
    }.property()

});

Here is a JSFiddle of both ways

如何在Ember 1.13中绑定多个类名？

2 个答案: