如何从车把模板将 css 类添加到子视图答案

【问题标题】：How to add css classes to a child view from handlebar template如何从车把模板将 css 类添加到子视图
【发布时间】：2012-03-15 00:04:20
【问题描述】：

我想从车把模板向子视图添加一个 CSS 类。我目前收到如下错误：

Uncaught TypeError: Object [object DOMWindow] has no method 'get'

我的代码如下：

App = Ember.Application.create()

App.ParentView = Ember.View.extend({
    foo: 'bar',
    content: 'Hello',
    ChildView: Ember.View.extend({
        classNames: this.get('parentView').get('classesToAdd')
    })
});

我在这里有一个 jsfiddle：http://jsfiddle.net/sohara/PKMTn/2/

将上下文从 Ember.View 转移到 dom 元素的 classNames 属性有什么特别之处吗？或者也许还有其他方法可以实现这一目标？

【问题讨论】：

标签： ember.js

【解决方案1】：

您可以覆盖视图上的init 以访问classesToAdd，参见http://jsfiddle.net/WCjda/1/

车把：

<script type="text/x-handlebars">
    {{#view App.ParentView}}
       {{#view ChildView classesToAdd="my-class"}}
            hello        
       {{/view}}
    {{/view}}
</script>

JavaScript：

App = Ember.Application.create()

App.ParentView = Ember.View.extend({
    foo: 'bar',
    content: 'Hello',
    ChildView: Ember.View.extend({
        init: function() {
            this._super();
            var classes = this.get('classesToAdd');
            this.set('classNames', Ember.makeArray(classes));
        }
    })
});

【讨论】：

谢谢。这基本上是我想要达到的目标。我想干掉车把模板。这是一个更干的jsfiddle：jsfiddle.net/sohara/WCjda/3 - 无需在模板中声明childView。需要注意的一件事：后来我意识到我可以通过更有创意地使用 css 选择器来达到相同的效果。（只需在 parentView 上声明一个类，然后按照 div.my-class div {#...css attributes } 的行创建一个选择器。但这让我的 css 更干净。
有一点需要注意，像这样设置类会破坏子视图的事件处理，因为常规的 ember-view 类没有添加到类名数组中，而是替换了数组。这是一个可能的解决方案的更新小提琴：jsfiddle.net/sohara/WCjda/4 这是对该问题的进一步讨论：github.com/emberjs/ember.js/issues/490

【解决方案2】：

我认为您不能在 ChildView 的 classNames 声明中使用 this，因为视图对象尚未实例化。

但是，您可以使用绑定。请参阅 Emberjs.com 上“自定义 HTML 元素”部分下的文档。

【讨论】：

我实际上已经尝试过。我设置了 classNamesBinding，但又遇到了另一个错误。