I'm facing a challenge displaying two different models on the index template in my Ember application.
There are two models, Cats and Dogs, that I want to showcase under the index route. It seems like a simple task, but I am struggling to implement it successfully.
Any suggestions from experienced developers?
Here is the JavaScript code for my application:
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.route('cat');
this.route('dog');
});
App.CatRoute = Ember.Route.extend({
model: function() {
return this.store.find('cat');
},
setupController: function(controller, model) {
controller.set('model', model);
}
});
App.DogRoute = Ember.Route.extend({
model: function() {
return this.store.find('dog');
},
setupController: function(controller, model) {
controller.set('model', model);
}
});
And here is the HTML code snippet:
<!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>