Ember.js Модель Наследования и Шаблонов
У меня проблемы с отображением 2 моделей в шаблоне индекса в моем приложении Ember.
У меня есть 2 модели, Кошки и Собаки, и я хотел бы показать обе из них под индексным маршрутом. Кажется, это должно быть просто, но я не могу понять это.
У кого-нибудь есть предложения?
Вот мой код JavaScript приложения
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.Pet = DS.Model.extend({
name: DS.attr('string'),
type: DS.attr('string')
});
App.Cat = App.Pet.extend({
miceKilled: DS.attr()
});
App.Dog = App.Pet.extend({
catsKilled: DS.attr()
});
App.Router.map(function() {
// this.resource('app');
this.route('cat');
this.route('dog');
});
App.CatRoute = Ember.Route.extend({
model: function() {
return this.store.find('cat')
// return App.Cat.find();
},
setupController: function(controller, model) {
controller.set('model', model);
}
});
App.DogRoute = Ember.Route.extend({
model: function() {
return this.store.find('dog')
// return App.Cat.find();
},
setupController: function(controller, model) {
controller.set('model', model);
}
});
App.IndexRoute = Em.Route.extend({
renderTemplate: function() {
this.render('test', { // the template to render
into: 'application', // the route to render into
outlet: 'dog_outlet', // the name of the outlet in the route's template
controller: 'dog' // the controller to use for the template
});
// this.render('cat', {
// into: 'application',
// outlet: 'cat_outlet',
// // controller: 'cat'
// });
}
});
App.Cat.FIXTURES = [
{
id: 1,
name: 'Fluffy',
miceKilled: 5
},
{
id: 2,
name: 'Screwy',
miceKilled: 15
},
{
id: 3,
name: 'Dan',
miceKilled: 2
}
];
App.Dog.FIXTURES = [
{
id: 1,
name: 'Spot',
catsKilled: 1
},
{
id: 2,
name: 'Rufruf',
catsKilled: 3
},
{
id: 3,
name: 'Peter',
catsKilled: 20
}
];
и вот мой HTML-код.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
</head>
<body>
<script type="text/x-handlebars">
{{#link-to 'index'}}Home{{/link-to}}
{{#link-to 'cat'}}Cats{{/link-to}}
{{#link-to 'dog'}}Dogs{{/link-to}}
{{outlet}}
{{outlet dog_outlet}}
{{outlet cat_outlet}}
</script>
<script type="text/x-handlebars" data-template-name="dog">
Dogs
{{#each}}
<div>
This dogs name is {{name}}, and he's killed {{catsKilled}} cats!
</div>
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="cat">
Cats
{{#each}}
<div>
This cats name is {{name}}, and he's killed {{miceKilled}} mice!
</div>
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="test">
Testing
{{controller}}
</script>
<script src="libs/jquery-1.10.2.min.js"></script>
<script src="libs/handlebars-1.0.0.js"></script>
<script src="libs/ember.js"></script>
<script src="libs/ember-data.js"></script>
<script src="custom/ember/app2.js"></script>
</body>
</html>
1 ответ
Так что для вашего конкретного случая давайте вернемся немного назад. Для индексного маршрута не предусмотрена какая-либо модель, поэтому вы не получаете никаких данных с сервера. Маршруты выбираются только тогда, когда вы нажимаете на соответствующий URL (таким образом, рендеринг контроллера собаки и шаблона не соответствует маршруту кошки для модели).
При этом, если мы хотим использовать информацию о кошках и собаках в индексном маршруте, нам нужно получить их обоих. Это отличная возможность для хэша rsvp https://github.com/tildeio/rsvp.js/blob/master/README.md#hash-of-promises
App.IndexRoute = Em.Route.extend({
model: function(){
return Ember.RSVP.hash({
dogs: this.store.find('dog'),
cats: this.store.find('cat')
});
}
});
Тогда вместо переопределения renderTemplate Хук вы можете просто отрендерить в шаблоне и отправить в шаблоне название и контекст.
<script type="text/x-handlebars" data-template-name="index">
{{render 'dog' dogs}}
{{render 'cat' cats}}
</script>
Кроме того, Питер выглядит как самый трудный работник с двумя другими расшатанными, он заслуживает удовольствия.