【问题标题】: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,但又遇到了另一个错误。
    猜你喜欢
    • 2012-05-24
    • 2014-01-29
    • 1970-01-01
    • 2018-02-17
    • 2021-04-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多