Ember.js：在未关联的视图中循环来自 ArrayController 的数据

Question

我设置了一个从 REST 端点提取帐户信息的路由：

Social.Router.map(function() {
    this.resource('accounts');
});

Social.AccountsRoute = Ember.Route.extend({
    model: function() {
        return Social.Account.find();
    }
});

Social.Account = DS.Model.extend({
    name: DS.attr('string'),
    username: DS.attr('string')
});

Social.AccountsController = Ember.ArrayController.extend();

我可以像这样在我的模板中循环这些数据：

<script type="text/x-handlebars" data-template-name="accountItem">
    {{#each account in controller}}
        <div class="avatar-name">
            <p>{{account.name}}</p>
            <p>{{account.username}}</p>
        </div>
    {{/each}}
</script>

我有另一个模板，我想在其中使用相同的帐户数据。如何从 View 中检索与 Account 模型相关的信息，以便可以在相应的模板中使用它？

Social.NewPostView = Ember.View.extend({
    tagName: 'div',
    accounts: function(){
        // return Account data here?
    }
});

更新 1

Here's a quick view of my UI

左侧是“实时”帐户数据。右侧是静态 HTML。我想重用右边左边的数据。有意义吗？

Answer 1

您应该查看控制器的 needs 属性。这允许您指定您可以从当前控制器访问的控制器列表。

有关emberjs guides的更多信息

NewPostController

Social.NewPostController = Ember.ObjectController.extend({
    needs: ['accounts'],

    init: function(){
        this._super();
        console.log(this.get('controllers.accounts'))
    }
});

然后，从您的模板中：

<script type="text/x-handlebars" data-template-name="newPost">
    {{#each account in controller.controllers.accounts}}
        <div class="avatar-name">
            <p>{{account.name}}</p>
            <p>{{account.username}}</p>
        </div>
    {{/each}}
</script>