阅读(1.6k) 书签赞(0) 我要纠错

EmberJS 模型定义关系

2018-01-03 19:40 更新

描述

Ember Data有几种内置的关系类型，它们定义了每个模型之间的关系。

内置关系:

一对一
一对多
多对多
显式反转
反身关系

一对一

对于两个模型之间的一对一关系，请使用DS.belongsTo：

语句

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

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

一对多

对于两个模型之间的一对多关系，请使用DS.belongsTo与DS.hasMany的组合：

语句

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

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

多对多

对于两个模型之间的多对多关系使用DS.hasMany：

语句

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

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

显式反转

对于显式逆元素，使用DS.hasMany的逆选项指定相关模型上的哪个属性为逆：

语句

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

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

反身关系

显式地定义另一侧相应地设置显式逆，并且如果不需要另一侧设置反转为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>

输出

让我们执行以下步骤，看看上面的代码如何工作：

将上面的代码保存在model_retnship.html文件中
在浏览器中打开此HTML文件。

以上内容是否对您有帮助：

写笔记

我要补充