在 Ember 中实现站点范围的 arrayController

Question

我一直在寻找解决此问题的方法大约一个星期，但没有成功。我们有一个 ember 应用程序，它有一个侧边栏，出现在所有路由上，显示用户帖子列表。重要的是帖子在提交时实时更新，并在列表顶部使用最新帖子进行排序，从我读过的内容来看，这需要一个数组控制器。问题是，我找不到任何方法（或者说不明白）来使用未直接引用当前路由的数组控制器和特定模型。我尝试在应用程序路由中使用以下代码呈现侧边栏：

Destination.ApplicationRoute = Ember.Route.extend({

    model: function(model) {

        var self = this;

        return new Em.RSVP.Promise(function (resolve, reject) {

            new Em.RSVP.hash({

                post : self.store.find('post')

            }).then(function (results) {

                resolve({

                    post: results.post

                });
            });
        });
    },

    renderTemplate: function(controller, model) {

        this.render();

        this.render('sidebars/postBar', {

            outlet: 'postbar',

            into: 'application',

            controller: 'posts',

            model: 'post'

        });
    }

然后我的阵列控制器有以下代码

Destination.PostsController = Ember.ArrayController.extend({

    itemController: 'post',

    sortProperties: ['id'],

    sortAscending: false

});

但是这根本不起作用，我很难找到任何如何完成此操作的示例。

Answer 1

您可以使用的方法是在 ApplicationRoute 中加载整个应用程序所需的任何模型。您不必像以前那样创建 RSVP.Promise，只需返回 RSVP.all 或 RSVP.hash，如下所示：

Destination.ApplicationRoute = Ember.Route.extend({
  model: function(model) {
    return Em.RSVP.Hash({
      post : self.store.find('post')
      //  fetch other models as required
    });
  }
});

现在控制器设置和渲染有两个选项。

选项 1：基于 Outlets 和路由的控制器设置。

接下来是设置适当的控制器并渲染视图。假设您在应用程序模板中定义了{{outlet 'sidebar'}}，ApplicationRoute 可以按如下方式呈现侧边栏：

Destination.ApplicationRoute = Ember.Route.extend({
  setupController: function(controller, model, transition) {
    // perform default application controller setup
    this._super(controller, model, transition);
    // setup sidebar controller model
    this.controllerFor('side-bar').set('model', model.posts);
    // setup other controllers as required...
  },

  renderTemplate: function(controller, model) {
    // render `posts` template into `side-bar` outlet with `side-bar` controller.
    var c = this.controllerFor('side-bar');
    this.render('side-bar', { outlet: 'side-bar, controller: c });
    // other top level outlet rendering as required...
  }
});

选项 2：基于视图助手的控制器设置和渲染。

我们可以避免在路由中完全覆盖setupController 或renderTemplate，而不是使用额外的出口。我们可以使用把手 render 帮助器来指定模型和控制器，以直接从我们的模板中使用。

因此，如果您的应用程序控制器默认使用 RSVP 哈希的结果进行设置，它将在其模型/内容上包含一个“帖子”属性。只需将以下内容添加到您的应用程序模板中：

{{render 'side-bar', posts}}

以上将呈现sidebar 模板并使用帖子模型为您设置单例侧边栏控制器。我认为这比搞乱插座要干净，因为听起来您不会根据您的问题将不同的视图呈现到侧边栏中。

关于渲染助手的 API 文档是 here，其中包含渲染助手的概述 here。

注意我使用了 Ember-cli 解析器命名约定，它使用了 dasherized 命名约定。如果您不使用 Ember CLI（我强烈推荐），那么您可能必须使用 PascalCased 字符串名称，即“SideBar”而不是“side-bar”。