EmberJS-Models Defining Relationship

Quiz

Description

The Ember Data has several built-in relationship types which are defines relationship between each model.

Built-in Relationships:

One-To-One
One-To-Many
Many-To-Many
Explicit Inverses
Reflexive Relation

One-To-One

For one-to-one relationship between two models use DS.belongsTo −

Syntax

App.User = DS.Model.extend({
   profile: DS.belongsTo('profile')
});

App.Profile = DS.Model.extend({
   user: DS.belongsTo('user')
});

One-To-Many

For one-to-many relationship between two models use DS.belongsTo in combination with DS.hasMany −

Syntax

App.Post = DS.Model.extend({
   comments: DS.hasMany('comment')
});

App.Comment = DS.Model.extend({
   post: DS.belongsTo('post')
});

Many-To-Many

For many-to-many relationship between two models use DS.hasMany −

Syntax

App.Post = DS.Model.extend({
   tags: DS.hasMany('tag')
});

App.Tag = DS.Model.extend({
   posts: DS.hasMany('post')
});

Explicit Inverses

For explicit inverses specify which property on the related model is the inverse using DS.hasMany's inverse option −

Syntax

App.Post = DS.Model.extend({
   tags: DS.hasMany('tag')
});

App.Tag = DS.Model.extend({
   posts: DS.hasMany('post')
});

Reflexive Relation

Explicitly define the other side set the explicit inverse accordingly and if you don't need the other side set the inverse to null −

Syntax

App.Comment = DS.Model.extend({
   onePost: belongsTo('post'),
   twoPost: belongsTo('post'),
   redPost: belongsTo('post'),
   bluePost: belongsTo('post')
});

App.Post = DS.Model.extend({
   comments: hasMany('comment', {
      inverse: 'redPost'
   })
});

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Defining Relationship</title>
      <!-- CDN's -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="index">
         <h2>Details of player: </h2>
         <b>Activity name:</b> {{name}}<br/>
         {{#each player in team}}
            <b>Player name: </b>{{player.name}}<br/>
            <b>Player's country name:</b> {{player.country.name}}
         {{/each}}
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         //defining model
         App.Country = DS.Model.extend({
            name: DS.attr('string'),
            country: DS.attr('string')
         });

         App.Country.FIXTURES = [{
            id: 1,
            name: 'India'}
         ];

         App.Player = DS.Model.extend({
            //data Model
            name: DS.attr('string'),
            //one-to-one relation uses DS.belongsTo method
            country: DS.belongsTo('country', {async: true})
         });

         //attach fixtures(sample data) to the model's class
         App.Player.FIXTURES = [{
            id: 1,
            name: 'Sachin Tendulkar',
            country: 1
         }];

          //defining model
         App.Activity = DS.Model.extend({
            // when async is true, it will fetch the related entities when you actually request them
            team: DS.hasMany('player',{async:true}),
            //one-to-many relation uses DS.hasMany method
            name: DS.attr('string')
         });

          //attach fixtures(sample data) to the model's class
         App.Activity.FIXTURES = [{
            id: 1,
            team: [1],
            name: 'Cricket'
         }];

          //The store cache of all records available in an application
         App.Store = DS.Store.extend({
            //adapter translating requested records into the appropriate calls
            adapter: DS.FixtureAdapter.extend()
         });

         App.IndexRoute = Ember.Route.extend({
            model: function() {
               //index route
               return this.store.find('activity', 1);
            }
         });
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works −

Save above code in model_retnship.htm file
Open this HTML file in a browser.

Print Page