刷新时的 Ember 错误

Question

我有一个非常简单的玩具应用程序，它使用 Rails 作为 API，客户端使用带有 CLI 的 Ember 1.8.1。

我有一个典型的侧边栏设置，当您单击该项目时，它会显示在列表旁边。一切正常，直到您使用页面上的列表项（命中包路由的 url）刷新页面，我收到以下错误：

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed <sm-client@model:package::ember387:63>

packages/index.hbs

<div class='sidebar'>  <ul>
    {{#each package in model}}
    <li>
      {{#link-to 'package' package}}
      {{package.name}}
      {{/link-to}}
    </li>
    {{else}}
    <li>No contacts found.</li>
    {{/each}}
  </ul>
</div>

应用程序.hbs

<h2 id="title">App</h2>

{{link-to 'Packages' 'packages'}}
{{link-to 'Home' 'index'}}
{{outlet 'sidebar'}}
{{outlet}}

package.hbs

<dl>
  <dt><strong>Name</strong></dt>
  <dd>{{model.name}}</dd>

  <dt><strong>Description</strong></dt>
  <dd>{{model.description}}</dd>
  <ul><strong>Tournaments</strong></ul>
   {{#each tournament in model.tournaments}}
   <li>
    {{tournament.name}}     
   </li>
   {{/each}}
</dl>

路由器.js

import Ember from "ember";
import config from "./config/environment";

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.resource("packages", function() {
    this.resource("package", {path: "/:package_id"}); });
});

export default Router;

路由/package.js

import Ember from 'ember';

export default Ember.Route.extend({
    model: function(params) {
    return this.store.find('package', params.package_id);
  },

  renderTemplate: function() {
    this.render(); 
    this.render('packages/index', {
      into: 'application',
      outlet: 'sidebar'
    });
 }
});

路由/包/index.js

import Ember from 'ember';

export default Ember.Route.extend({
    model: function(){
        return this.store.find('package');
    }

});

models/package.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr('string'),
  tournaments: DS.hasMany('tournament',{
    async: true,
    inverse: 'tournamentPackage'
  })
});

models/tournament.js 从“ember-data”导入 DS；

export default DS.Model.extend({
    name: DS.attr('string'),
    buyIn: DS.attr('string'),
    attempts: DS.attr('string'),
    description: DS.attr('string'),
    tournamentPackage: DS.belongsTo('package', {
    async: true
    })
});

如果我注释掉 {{outlet 'sidebar'}} 并直接访问包路由并刷新，它可以正常工作。我敢肯定，在重新加载时，它会尝试从侧边栏中的包路径遍历我的奇异模型。其他线程已经提到不要在动态段上返回多个模型，所以我不确定该怎么做。

旁注：我正在尝试避免使用控制器，因为我听说 Ember 会将该逻辑移至框架的其他部分，但如果解决方案是使用控制器，我使用控制器没有问题。

Answer 1

我从一位朋友那里得到了一些帮助。你绝对正确，我的路线搞砸了。此外，我们发现使用命名的 {{outlet}} 根本不是正确的方法。我最终做了什么：

模板/application.hbs

<h2 id="title">Stake Manager</h2>

{{name}}
{{render "sidebar" packages}}

{{outlet}}

模板/sidebar.hbs

<ul>
  {{#each package in model}}
  <li>
    {{#link-to 'package' package}}
    {{package.name}}
    {{/link-to}}
  </li>
  {{else}}
  <li>No contacts found.</li>
  {{/each}}
</ul>

我还让包资源转到应用根目录，因为我希望在每个页面的侧边栏中都有该信息的某个版本（至少现在是这样）

Router.map(function() {
  this.resource("packages", { path: '/'}, function(){
    this.resource("package", { path: '/:package_id'} );
  });
});

告诉应用程序控制器应用程序路由中的模型'packages'，以便我们可以将其传递给应用程序模板中的{{render 'sidebar' packages}}。 （在我 100% 绕着这个脑袋之后，我会把它变成一个组件）

setupController: function(controller){
        controller.set('packages', this.store.find('package'));
    }
}); 

我认为我对控制器知识的缺乏真的是通过我离开这里。我想我最好不要知道一些控制器正在消失:)

Answer 2

您的问题出在routes/package.js 文件中。检查您在 model 挂钩中所做的事情：

model: function(params) {
  return this.store.find('package', params.package_id);
}

您正在从 API 获取 一个 包。您尚未定义setupController，因此model 挂钩的结果会自动设置在控制器的model 属性上（默认为PackageController）。之后，您显式调用 renderTemplate 并渲染当前模板 (package.hbs) AND 额外的 package/index.hbs。这个额外的模板呈现如下：

{{#each package in model}}
(...)
{{/each}}

那么，你的型号是什么？你的模型没有改变。它仍然是this.store.find('package', params.package_id)，所以一个package。在一个路由中渲染多个模板仍然使用一个当前控制器。

那么，你怎样才能得到你想要的呢？在您的packages/index.hbs 中使用{{outlet}}。您需要更改模板，但是当您输入 package 路由时，index 和 package 控制器都处于活动状态（并且两个模板都处于活动状态）。在 packages/index.hbs 文件中将软件包列表呈现为侧边栏，最后添加 {{outlet}} 看看你得到了什么。

更多信息请参考Routing in Ember guides。