如何将夹具加载到ember中具有不同模型的模板中

Question

我的代码的目的是能够将各种固定装置加载到模板中。例如：

族模板：

{{#each model as family}}
<p>{{family.name}} + "is" + {{family.age}} + "years old"</p>
{{/each}}

兄弟固定装置：[{ id:1, name:"Greg", age:40 }]

姐妹装：[{ id:1, name:"Mary", age:35 }]

所以当我打电话给时

#/brothers我会得到<p>Greg is 40 years old</p>

与

#/sisters我会得到<p>Mary is 35 years old</p>

我想我在正确的路线上遇到了麻烦。2） ｛｛each｝｝/｛with｝的用法。3） 固定装置/模型的使用。你可以在我的github仓库找到所有东西。提前感谢您的帮助！

应用程序模板-Application.hbs:

<br><br>
<div class="container">
    <ul class="nav nav-pills" role="tablist">
        <li class="active"><a href="#/home">Home</a></li>
        <li><a href="#/brothers">Brothers</a></li>
        <li><a href="#/sisters">Sisters</a></li>
    </ul>
    <div class="container">
        {{outlet}}
    </div>
</div>

族模板（进入应用程序的｛｛outlet｝｝）-Family.hbs:

<h1>Fixtures and Models</h1>
{{#each in model as family}}
    <p>{{family.name}} is here</p>
{{else}}
    <li>DIDN'T WORK</li>
{{/each}}

家庭模型和固定装置-Family.js:

App.Family = DS.Model.extend({
    name    : DS.attr(),
    age     : DS.attr()
});

App.Brothers = DS.Model.extend({
name    : DS.attr(),
age     : DS.attr()
});
App.Sisters = DS.Model.extend({
name    : DS.attr(),
age     : DS.attr()
});
App.Brothers.FIXTURES = [
  {
    "id"    : 1,
    "name"  : "Greg",
    "age"   : 10
  },
  {
    "id"    : 2,
    "name"  : "Mike",
    "age"   : 23
  }
];
App.Sisters.FIXTURES =
[
  {
    "id"    :1,
    "name"  :"Mary",
    "age"   :15
  },
  {
    "id"    :2,
    "name"  :"Gina",
    "age"   :34
  }
];

我的所有路由的app.js文件：

App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function() {
   this.resource('application');
   this.resource('home');
   this.resource('brothers');
   this.resource('sisters');
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('application');
}
});
App.FamilyRouter = Ember.Route.extend({
});
App.HomeRoute = Ember.Route.extend({
});
App.FamilyRoute = Ember.Route.extend({
});
App.BrothersRoute = Ember.Route.extend({
model: function() {
this.store.find('brothers');
},
renderTemplate: function() {
return this.render('family');
}
});
App.SistersRoute = Ember.Route.extend({
model: function() {
return this.store.find('sisters');
}
});

同样，您可以在我的github repo 中找到所有的codez

Answer 1

您需要两个修复程序。

首先，您使用了错误的#each语法。更改为：

<h1>Fixtures and Models</h1>
{{#each family in model}}
    <p>{{family.name}} is here</p>
{{else}}
    <li>DIDN'T WORK</li>
{{/each}}

第二，你不会让兄弟模特回归。更改为：

App.BrothersRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('brothers');
    },
    templateName: 'family'
});