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>

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>

application.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>

router.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;

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

});

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

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

Answer 1

您的问题出在 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。

Answer 2

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

templates/application.hbs

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

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

{{outlet}}

templates/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'包}}。（在我 100% 围绕它之后，我会把它变成一个组件）

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

我认为我缺乏控制器知识真的是因为我离开了这里。我想如果我不知道有些控制器会消失会更好 :)

Ember 刷新时出错

Ember error on refresh

javascript

ember.js

ember-data

ember-cli