在Ember的嵌套模板中显示ApplicationController的模型

时间:2014-10-10 18:07:37

标签: javascript ember.js

我想在登录后显示用户的用户个人资料。所以我想我将Application.Controller变为ObjectController,并将它的模型属性设置为user-object。 我现在遇到的问题是我不知道如何在嵌套的配置文件模板中显示用户属性? 我实际上使用{{#each todo in App.todosController.content}}在SO上看到了其他答案。但这只适用于ArrayController。也许只有ArrayController这是可能的,我真的不知道,但那会很奇怪。谢谢你的帮助!

为了测试这一点,我在登录成功时将Application.Controller的模型设置为用户对象。 这是我的代码:

    <script type="text/x-handlebars" id="profile">
        <div class="content">
            <div class="content-padded">
                <div>
                    <p><h3>Username: {{{user.username}}}</h3><p>
                    <p>trials: {{user.trials}}</p>
                    <p>results: {{user.results}}</p>
                    <p>email: {{user.email}}</p>
                </div>
            </div>
        </div>
</script>

App.Router.map(function() {
this.resource('signup');
this.resource('login');
this.resource('profile');
this.resource('practice');
this.resource('overview');
});

App.LoginController = Ember.ObjectController.extend({
    model: {},
    needs: ['application'],
    loggedInUser: {id: 9, 
    username: "rooty", 
    trials: "fghsds", 
    results: "fdfsd", 
    email: "dsefs@ds.com"},
    loginHandler: function(data) {
        // sign in logic
        this.set("controllers.application.isLoggedIn", true);
        this.set("controllers.application.model", loggedInUser);
    }
});

App.ApplicationController = Ember.ObjectController.extend({
    isLoggedIn: false
});

用户对象如下所示:

User {id: 9, 
        username: "rooty", 
        trials: "fghsds", 
        results: "fdfsd", 
        email: "dsefs@ds.com"}

1 个答案:

答案 0 :(得分:0)

你真是太近了!因此,您的登录控制器在应用程序控制器上设置模型。控制器的登录控制器的needs属性意味着您的登录控制器可以使用应用程序控制器范围内的所有属性。遵循该逻辑,您的配置文件控制器也不能needs: ['application']

通过一些工作,我们可以通过您的个人资料控制器呼叫您喜欢的用户:

needs: ['application'],
users: Ember.computed.alias('controllers.application.model')

然后在您的个人资料模板中,您已有的工作应该有效:

<div>
  <p><h3>Username: {{{user.username}}}</h3><p>
  <p>trials: {{user.trials}}</p>
  <p>results: {{user.results}}</p>
  <p>email: {{user.email}}</p>
</div>

JSBin

注意在JSBin中,在索引控制器上,我有一个应用程序模型的计算别名。索引模板中的输入帮助器值绑定到此计算别名,即应用程序的模型。在应用程序模板中观察我只使用{{model}}。当您输入输入时,您会看到模型更改归功于Ember强大的绑定,因此我们通过needs和计算别名确定了应用程序模型的目标。

与个人资料模板相同。