EmberJS - 关系

更新于 2025/12/29 5:07:17

Ember.js 提供关系类型来指定模型如何相互关联。有不同的关系类型，例如，一对一关系可以与 DS.belongsTo 一起使用，一对多关系可以与 DS.hasMany 以及 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')
});

示例

下面给出的示例展示了关系类型的使用。使用以下命令创建两个名为 account 和 staff 的适配器 −

ember generate adapter adapter_name

现在打开 app/adapters/account.js 文件并添加以下代码 −

import ApplicationAdapter from './application';

//创建一个"帐户"数组来存储关系数据
const account = {
   "data": {
      "type": "account",
      "id": "100",

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

export default ApplicationAdapter.extend ({
   //此方法从"staff"适配器获取数据
   findRecord() {
      //从数组返回数据
      return account;
   }
});

打开 app/adapters/staff.js 文件并添加以下代码 −

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

//为 type 和 id 指定值
const relval1 = {
   data: {
      type: "staff",
      id: "1",
      attributes: {
         name: 'JavaScript'
      }
   }
};

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

//变量"relval3"将数据推送到"relval1"和"relval2"
const relval3 = Ember.A();
relval3.pushObject(relval1);
relval3.pushObject(relval2);

export default ApplicationAdapter.extend ({
   findRecord(store, type, id) {
      //查找项目 ID 并返回"relval3"变量
      let valret = relval3.find(function (item) {
         return id === Ember.get(item, 'data.id');
      });
      //搜索到的项目将从"valret"变量传递给"relval3"
      return valret;
   }
});

创建两个模型，名称分别为 account 和 staff。打开 app/models/account.js 文件并包含以下代码 −

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

//定义模型之间的一对一和一对多关系
import { belongTo, hasMany } from "ember-data/relationships";

export default DS.Model.extend({
    //当 async 为 'true' 时，它将获取相关条目
   	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 ({
   //使用'attr()'方法指定属性
   name: attr()
});

接下来，创建一个路由并将其命名为 application.js。打开此文件(在 app/routes/ 下创建)，并添加以下代码 −

import Ember from 'ember';

export default Ember.Route.extend ({
    model(){
        //返回 model() 钩子的值
        return this.get('store').findRecord('account', 100); //检索特定 id 的记录
    }
});

使用以下命令创建名为 application 的序列化器 −

ember generate serializer serializer_name

打开 app/serializers/application.js 文件并添加以下代码 −

import DS from 'ember-data';

//它是默认的序列化器，可与 JSON API 后端配合使用
export default DS.JSONAPISerializer.extend ({
   
    //keyForRelationship() 方法覆盖命名约定
    keyForRelationship: function(key, relationship, method) {
        return Ember.String.camelize(key); //返回字符串的 lowerCamelCase 形式
    }
});

使用以下代码打开在 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}}