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>

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;

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

});

模型/ 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'}}并直接访问包路线并刷新，则可以正常工作。我确信在重新加载时它试图从侧边栏中的包路径循环我的奇异模型。其他线程提到不要在动态段上返回多个模型，所以我不知道该怎么做。

旁注：我正在努力避免使用控制器，因为我听说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。在一个路径中渲染多个模板仍然使用一个当前的控制器。

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

有关详细信息，请参阅Routing in Ember guides。

Answer 2

我从朋友那里得到了一些帮助。你肯定是正确的，我的路线搞砸了。此外，我们发现使用一个名为{{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>

我还将包资源转到app root，因为我想在每个页面的侧边栏中显示该信息的某些版本（至少现在）

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

告诉应用程序控制器什么型号的包装＆＃39;在应用程序路由中，我们可以将其传递给{{render＆＃39; sidebar＆＃39;在应用程序模板中打包}} （我将头部100％缠绕在此后，我将把它变成一个组件）

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

我认为我在这里缺乏控制器知识。我想，如果不知道有些控制器会消失，我会更好。）

刷新时出现Ember错误

2 个答案: