EmberJS-関係

Ember.jsは、モデルが互いにどのように関連するかを指定する関係タイプを提供します。 1対1の関係は_DS.belongsTo_で使用でき、1対多の関係は_DS.hasMany_で_DS.belongsTo_とともに使用でき、多対多の関係は_DS.belongsTo_で使用できます。 DS.hasMany。

構文

import DS from 'ember-data';

export default DS.Model.extend ({
   var_name1: DS.belongsTo('model_name1'),
   var_name2: DS.hasMany('model_name2')
});

例

以下の例は、関係タイプの使用を示しています。次のコマンドを使用して、アカウントと_staff_という名前の2つのアダプタを作成します-

ember generate adapter adapter_name

今_app/adapters/account.js_ファイルを開き、次のコードを追加します-

import ApplicationAdapter from './application';

//created an "account" array to store relationship data
const account = {
   "data": {
      "type": "account",
      "id": "100",

      "relationships": {
         "secondVal": {
            "data": {
               "type": "staff",
               "id": "2"
            }
         },
         "firstVal": {
            "data": {
               "type": "staff",
               "id": "1"
            }
         }
      }
   }
};

export default ApplicationAdapter.extend ({
  //this method fetches data from 'staff' adapter
   findRecord() {
     //returns the data from array
      return account;
   }
});

_app/adapters/staff.js_ファイルを開き、次のコードを追加します-

import ApplicationAdapter from './application';
import Ember from 'ember';

//values given for type and id
const relval1 = {
   data: {
      type: "staff",
      id: "1",
      attributes: {
         name: 'JavaScript'
      }
   }
};

const relval2 = {
   data: {
      type: "staff",
      id: "2",
      attributes: {
         name: 'jQuery'
      }
   }
};

//the variable 'relval3' pushes the data to 'relval1' and 'relval2'
const relval3 = Ember.A();
relval3.pushObject(relval1);
relval3.pushObject(relval2);

export default ApplicationAdapter.extend ({
   findRecord(store, type, id) {
     //finds the item id and returns to 'relval3' variable
      let valret = relval3.find(function (item) {
         return id === Ember.get(item, 'data.id');
      });
     //the searched item will passed to 'relval3' from 'valret' variable
      return valret;
   }
});

accountと_staff_という名前の2つのモデルを作成します。 _app/models/account.js_ファイルを開き、次のコードを含めます-

import DS from 'ember-data';
import Model from "ember-data/model";
import attr from "ember-data/attr";

//defines one-to-one and one-to-many relationship between models
import { belongsTo, hasMany } from "ember-data/relationships";

export default DS.Model.extend({
  //when async is 'true', it will fetch related entries
   firstVal: belongsTo('staff', {async: true}),
   secondVal: belongsTo('staff', {async: true})
});

今_app/models/staff.js_ファイルを開き、次のコードを含めます-

import DS from 'ember-data';
import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default DS.Model.extend ({
  //specifying attributes using 'attr()' method
   name: attr()
});

次に、ルートを作成し、_application.js_という名前を付けます。 _app/routes/_の下に作成されるこのファイルを開き、次のコードを追加します-

import Ember from 'ember';

export default Ember.Route.extend ({
   model(){
     //returns the value of model() hook
      return this.get('store').findRecord('account', 100); //retrieve a record for specific id
   }
});

次のコマンドを使用して、アプリケーションという名前のシリアライザーを作成します-

ember generate serializer serializer_name

_app/serializers/application.js_ファイルを開き、次のコードを追加します-

import DS from 'ember-data';

//it is the default serializer and works with JSON API backends
export default DS.JSONAPISerializer.extend ({

  //keyForRelationship() method overwrites the naming conventions
   keyForRelationship: function(key, relationship, method) {
      return Ember.String.camelize(key); //returns the lowerCamelCase form of a string
   }
});

次のコードでapp/templates/の下に作成されたapplication.hbsファイルを開きます-

<h2>Model Relationships</h2>
//display the id along with the name
{{model.firstVal.id}} : {{model.firstVal.name}}
<br>
{{model.secondVal.id}} : {{model.secondVal.name}}
{{outlet}}

出力

emberサーバーを実行します。次の出力が表示されます-

Ember.jsモデルの関係

Emberjs-model-relationships

EmberJS-関係

構文

例

出力

目次