javascript - 刷新时出现 Ember 错误

Question

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

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

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

包/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'
    });
 }
});

路由/packages/index.js

import Ember from 'ember';

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

});

模型/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'
  })
});

模型/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'}} 并直接访问包路由并刷新，它就可以正常工作。我确信在重新加载时，它会尝试从侧边栏中的包路径循环遍历我的单一模型。其他线程提到不要在动态段上返回多个模型，因此我不确定该怎么做。

旁注:我试图避免使用 Controller ，因为我听说 Ember 会将该逻辑转移到框架的其他部分，但如果解决方案是使用 Controller ，我使用 Controller 没有问题。

Answer 1

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

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

您正在从 API 获取一个包。您尚未定义 setupController，因此 model Hook 的结果会自动设置在 Controller 的 model 属性上(PackageController默认)。之后，您显式调用 renderTemplate 并渲染当前模板 (package.hbs) AND 附加 package/index.hbs 。这个附加模板渲染如下:

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

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

那么，怎样才能得到你想要的东西呢？在 packages/index.hbs 中使用 {{outlet}}。您需要更改模板，但是当您输入 package 路由时，index 和 package Controller 都处于事件状态(并且两个模板都处于事件状态) 。将软件包列表呈现为 packages/index.hbs 文件中的侧边栏，在末尾添加 {{outlet}} 并查看您得到的内容。

请引用Routing in Ember guides了解更多信息。