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：基于出口和路由的控制器设置。

接下来是设置适当的控制器并渲染视图。假设您已在应用程序模板中定义了{{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哈希的结果进行设置，它将在其模型/内容中包含“posts”属性。只需将以下内容添加到您的应用程序模板中：

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

上面将呈现sidebar模板并使用posts模型为您设置单件SideBar控制器。我认为这比使用插座搞得更干净，因为听起来你不会根据你的问题在侧边栏中呈现不同的视图。

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

注意我已经使用了Ember-cli解析器命名约定，它使用了一个简化的命名约定。如果您没有使用Ember CLI（我强烈推荐），那么您可能必须使用PascalCased字符串名称，即'SideBar'而不是'side-bar'。

在Ember中实现站点范围的arrayController

1 个答案:

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

选项2：查看基于帮助程序的控制器设置和渲染。