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

时间:2014-09-07 18:02:11

标签: ember.js ember-data handlebars.js

我的代码的目的是能够将各种灯具加载到模板中。例如:

家庭模板:

{{#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>

VS

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

我认为我遇到了问题1)正确的路由。 2){{each}} / {{with}}的使用。 3)灯具/型号的使用。你可以在github repo找到所有的一切。在此先感谢您的帮助!

应用程序模板 - 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

找到所有代码

1 个答案:

答案 0 :(得分:0)

您需要两个修复程序。

首先,您使用了错误的#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'
});