EmberJS将变量传递给布局

时间:2014-10-11 23:22:30

标签: javascript layout ember.js

我有一个非常基本的测试应用程序。它有2页空索引和另一页上的登录表单。我想知道如何将变量传递给每个页面上相同的布局(用户名/状态以显示它并按状态显示登录/注销)。

或者最好的解决方案可能是这样的:将用户模型传递给可从任何地方获得的AppController(如登录页面或登录模式),如果我更改并保存数据,则网站模板只是通过传递而改变变量

我试图找到一个好方法,我找到了一些,但没有一个工作:(如果你知道一个工作方式,请分享我或告诉我什么是解决方案。

这是我的代码:我有的JS:

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({});


/* *** Index *** */
App.IndexView = Ember.View.extend({
    layoutName: 'app_view'
});

App.IndexController = Ember.Controller.extend({
});


/* *** LOGIN *** */
App.Router.map(function () {
    this.resource("login");
});
App.LoginView = Ember.View.extend({
    layoutName: 'app_view'
});
App.LoginController = Ember.Controller.extend({
    login: function() {
        // blah blah
    }
});

布局模板:

<script type="text/x-handlebars" data-template-name="app_view">
    <header id="site">
        {{#link-to "index"}}Index{{/link-to}}
        {{#link-to "login"}}Login{{/link-to}}
        {{variablaWhatIWant}}
    </header>
    <hr />
    <section id="content">
        {{yield}}
    </section>
    <hr />
    <footer id="main">
        Footer
    </footer>
</script>

2个视图模板:

<script type="text/x-handlebars" data-template-name="index">
    Hello INDEX page!
</script>
<script type="text/x-handlebars" data-template-name="login">
    <form class="form-horizontal" {{action "login" on="submit"}}>
        <div class="control-group">
            Username: {{input value=username type="text"}}
        </div>
        <div class="control-group">
            Password {{input value=password type="password"}}
        </div>
        <button type="submit" class="btn">Log in!</button>
    </form>
</script>

非常感谢! :)

1 个答案:

答案 0 :(得分:1)

您有正确的想法,请参阅管理控制器之间的依赖关系http://emberjs.com/guides/controllers/dependencies-between-controllers

只需设置needs属性,您就可以从任何其他

访问该控制器
App.LoginController = Ember.Controller.extend({
    needs: ['application'],
    login: function() {
        this.authenticate(this.get('username'), this.get('password')).then(function(user) {
             this.set('controllers.application.user', user);
        },
        function(err) {
             //auth err
        }
    }
});