具有动态类名的 Ember 视图

Question

考虑以下几点：

父模板：

{{view App.SomeView id="42" panelClass="default"}}

查看模板：

        <div class="col-md-3 col-sm-6">
            <div class="panel panel-{{panelClass}}">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        {{name}}
                    </h3>
                </div>
                <div class="panel-body">
                    {{description}}
                </div>
            </div>
        </div>

查看JS：

App.SomeView = Ember.View.extend({
    templateName: 'views/some-view'
});

如何在面板类设置正确的情况下实现输出 HTML？目前它不起作用，因为它要绑定，所以它插入了 ember metamorph 脚本标签，而不仅仅是面板类的纯文本。

此外，模板被包裹在一个额外的 div 中。我将如何修改它，以便 ember-view 包装 div 实际上是模板中的第一个 div（带有 col-md-3 col-sm-6 的那个）？

Answer 1

bind-attr 助手就是因为这个原因而存在的。 Here's指南入口。

<div {{bind-attr class=":panel panelClass"}}></div>

另外，不确定是否可以在模板中使用 panelClass 前缀。如果事先使用计算属性添加panel- 可能更容易。

---

对不起，我没有看到你关于额外 div 的第二个问题。该指南解释了here 如何扩展元素。

App.SomeView = Ember.View.extend({
    classNames: ['col-md-3', 'col-sm-6']
});