Question

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

如果在我的样式表中执行此操作：

body{ background-color: grey }

它会改变整个应用程序的背景颜色。

以下是相关模板：

        <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来了解插入或删除视图的时间，并在正文中添加登录类：

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

的CSS：

.login { background-color: grey }

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

1 个答案: