ember.js - Ember.js -- 如何将类绑定到 rootElement？

Question

我正在尝试将一个类绑定到我的应用程序的根元素，但我在让它工作时遇到了一些麻烦。

我希望classNameBinding在 my中设置 theApplicationView可以解决问题，但看起来ApplicationView's 元素是undefined. 我可以通过定位手动添加/删除类$(App.rootElement)，但如果可以的话，我宁愿以“余烬方式”做事。

这是一个jsfiddle：http: //jsfiddle.net/mcYcU/1/

谢谢！

Answer 1

这App.rootElement是您的应用程序将在其中呈现的节点（默认情况下为 body 标签），除此之外它并没有做太多（我认为）。如果您想将 Ember 应用程序与其他 HTML 分开，这很有用...

您可以/应该考虑的目标是，App.ApplicationView因为它将是您应用程序的最外层节点，就在App.rootElement. 只需要添加一个类，classNames: ['appRoot']这样你就可以在你的 CSS 中定位它

App.ApplicationView = Ember.View.extend({

    classNames: ['appRoot'],

    isActive: false,    
    classNameBindings: ['isActive'],    

    toggleClass: function(){
        this.toggleProperty('isActive');
    },

    manuallyAddClass: function() {
        this.toggleClass();
        if(this.get('isActive')) {
            $(App.rootElement).addClass('is-active');
        } else {
            $(App.rootElement).removeClass('is-active');
        }
    }
});

你的 CSS 可能有类似#application-root .appRoot.is-active { ... }...