CODEWITHSUNDEEP
javascriptember.jsember-data
dvreed77
dvreed77

Reputation: 2387

Ember.js Model Inheritance and Templates

I'm having trouble showing 2 models within the index template in my Ember application.

I have 2 models, Cats and Dogs and I would like to show both of these under the index route. This seems like it should be simple, but I can't quite figure it out.

Does anyone have any suggestions?

Here is my application javascript code

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
 }
];

and here is my HTML code.

<!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>

Upvotes: 1

Views: 1246

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

So for your particular case lets step back a bit. The index route doesn't have any model provided, so you aren't fetching any data from the server. The route's are only hit when you are hitting the associated url (so rendering the dog's controller and template doesn't hit the cat's route for the model).

That being said, if we want to use the cats and dogs info in the index route, we need to fetch them both. This is a great opportunity for rsvp hash 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')
   });
  }
});

Then instead of overriding the renderTemplate hook you can just render in the template and send in the template name and context.

<script type="text/x-handlebars" data-template-name="index">
  {{render 'dog' dogs}} 
  {{render 'cat' cats}} 
</script>

Furthermore Peter looks like the hardest worker with the other two slacking, he deserves a treat.

http://emberjs.jsbin.com/OxIDiVU/89/edit

Upvotes: 1

Related Questions