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

Display model of ApplicationController in a nested template in Ember

本文关键字：显示 ApplicationController 模型 嵌套 Ember      更新时间：2023-09-26

我想在登录后显示用户的用户配置文件。所以我想让Application.Controller成为ObjectController，并将其模型属性设置为用户对象。我现在遇到的问题是，我不知道如何在嵌套的配置文件模板中显示用户属性？事实上，我在SO上看到了其他答案，使用了App.todosController.content｝｝中的{#each-todo。但这只适用于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"}

你太接近了！因此，您的登录控制器会在应用程序控制器上设置模型。您的控制器的登录控制器的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和计算的别名确定了应用程序模型的目标。

配置文件模板也是如此。

相关文章：