css - 在 Ember 中更改现有模板的背景颜色

Question

我在 Emberjs 中有很多模板，其中之一是 login 模板。我想做的是只更改那个模板的背景颜色。

如果在我的样式表中这样做:

正文{ background-color: gray }

它改变了整个应用的背景颜色。

这是有问题的模板:

        <div class="container login">   
         <script type="text/x-handlebars" id="login" >
         <form {{action "loginUser" on="submit"}} class="form-signin">
         <h2 class="form-signin-heading heading">Login</h2>
          {{input type="text" value=username class="input-block-level"}}
          {{input type="password" value=password class="input-block-level"}}
         <button type="submit" class="btn btn-large btn-primary">Login</button>
         </form>
        </script>
        </div>

那么我该如何实现呢？此外，有什么办法可以组织这些模板吗？我的 index.html 文件变得太大了。

Answer 1

您可以使用didInsertElement 和willClearRender 知道何时插入或删除 View ，并在正文中添加登录类:

App.LoginView = Ember.View.extend({
    templateName: 'login',
    didInsertElement: function() {
        $('body').addClass('login')
    },
    willClearRender: function() {
        $('body').removeClass('login')
    }
});

CSS:

.login { background-color: grey }