閱讀(1.6k) 書簽贊(0) 我要糾錯

EmberJS 模型定義關(guān)系

2018-01-03 19:40 更新

描述

Ember Data有幾種內(nèi)置的關(guān)系類型，它們定義了每個模型之間的關(guān)系。

內(nèi)置關(guān)系:

一對一
一對多
多對多
顯式反轉(zhuǎn)
反身關(guān)系

一對一

對于兩個模型之間的一對一關(guān)系，請使用DS.belongsTo：

語句

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

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

一對多

對于兩個模型之間的一對多關(guān)系，請使用DS.belongsTo與DS.hasMany的組合：

語句

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

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

多對多

對于兩個模型之間的多對多關(guān)系使用DS.hasMany：

語句

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

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

顯式反轉(zhuǎn)

對于顯式逆元素，使用DS.hasMany的逆選項指定相關(guān)模型上的哪個屬性為逆：

語句

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

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

反身關(guān)系

顯式地定義另一側(cè)相應(yīng)地設(shè)置顯式逆，并且如果不需要另一側(cè)設(shè)置反轉(zhuǎn)為null：

語句

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'
   })
});

例子

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

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：

將上面的代碼保存在model_retnship.html文件中
在瀏覽器中打開此HTML文件。

以上內(nèi)容是否對您有幫助：

寫筆記

我要補充