Ember Model

    xiaoxiao2021-03-26  28

    model是指数据层,也就是一个用于向用户展示的数据对象。考虑到前后端分离,其实可以认为展现内容与后端的DTO对象或者DVO对象是一一对应的。同时,model会通过json的形式以http请求的方式与服务器进行交互。但是,model的形式不一定是json的,其他的形式都是可以的。也就是说,model是持久化的。

    这种方式下,ember本身提供了许多api,这也就是Ember data做的事情。Ember Data为你提供了更加简便的方式操作数据,统一管理数据的加载,降低程序复杂度。

    Ember Data有几个重要的概念,分别为:models、records、adapters、store、serializer.

    models

    个人认为,model这个类,应该和后端的DO或者是DTO对象是一一对应的。 model的定义,可以通过命令行方式: ember g model <your-model-name> 则会创建一个app/models/<your-model-name>.js的文件。其中就是model的主体,由若干个属性构成,如:

    export default DS.Model.extend({ title: DS.attr('string'), // 字符串类型 flag: DS.attr('boolean'), // 布尔类型 timestamp: DS.attr('number'), // 数字类型 birth: DS.attr('date'), //日期类型 addr: DS.attr(), //json类型,其实就是string });

    这里需要注意,没有id字段,Ember 会默认生成id属性。 如果有对应关系的话,比如一对多或者多对一的情况,那么可以使用Ember Data中的hasMany 以及 belongsTo方法。belongsTo为一对一关系,hasMany为一对多关系。使用方式如下

    import DS from 'ember-data'; //app/models/blog-post.js export default DS.Model.extend({ comments: DS.hasMany('comment') }); //app/models/commont.js export default DS.Model.extend({ blogPost: DS.belongsTo('blog-post') });

    如果是多对多的关系,则如下就好:

    import DS from 'ember-data'; //app/models/blog-post.js export default DS.Model.extend({ comments: DS.hasMany('comment') }); //app/models/commont.js export default DS.Model.extend({ blogPost: DS.hasMany('blog-post') });

    这个对应关系,可以看做为,实际的逻辑表之间的对应关系。

    此外,还可以添加计算属性,因为,model也是一个Ember Object

    export default DS.Model.extend({ title: DS.attr('string'), // 字符串类型 flag: DS.attr('boolean'), // 布尔类型 tf: Ember.computed('title', 'flag', function() { return `${this.get('title')} ${this.get('flag')}`; }) });

    store & record

    store这个概念,在Ember Data中十分重要。 store是指所有的从服务端活动的record的数据以及新创建的record数据。即,store为所有数据的缓存,所有关于record的增删改查动作,都需要经过store。

    一般情况下,一个应用,只有一个DS.store,它是由Ember.Application初始化的。

    record是指一个model的实例,他可能是一个从服务端返回的数据,当然,你自己也可以新建一个record。

    假设我们有一个route:

    // app/routes/store-route.js import Ember from 'ember'; export default Ember.Route.extend({ model: function() { } });

    store 这个概念,可以在route以及controller中使用。形如this.get('store') 或者 this.store。

    查询record

    (1)store.findRecord() 通过model的type以及id,发起一个请求,去获取数据,他返回一个promise对象,结果为record。

    model(){ return this.store.findRecord('model-example',1).then((data) => { return data; }); //get请求为 域名/model-examples/1, 例如 http://localhost:4200/model-examples/1 }

    (2)store.peekRecord(), 通过model的type以及id,不发起一个请求,从store中去获取现有以加载的数据。

    model(){ return this.store.peekRecord('model-example',1); //无请求 }

    (3)store.findAll(), 通过model的type获取所有的数据,发起请求,返回的为,DS.PromiseArray对象,结果为DS.RecordArray

    model(){ return this.store.findAll('model-example').then((data)=>{return data}); //get请求为 域名/model-examples, 例如 http://localhost:4200/model-examples }

    (4)store.peekAll(), 通过model的type获取所有的数据,不发起请求,从store中去获取现有以加载的数据,返回的为DS.RecordArray

    model(){ this.store.findAll('model-example'); //无请求 }

    这里需要注意,DS.RecordArray,并不是一个[]它使一个可遍历的对象。这意味着,如果你在模板中,使用了这些reocrd,那么就可以享受到双向绑定的好处,同时,也提供了一些API,能够帮助你更方便的使用。具体可参考:Ember.js DS.Store

    (5)store.query()条件查询,查询条件为type以及自定义条件,同样也是一个get请求,返回结果通store.findAll()

    model(){ this.store.query('model-example',{firstName:'James'}); //get 请求,请求为 域名/model-examples?firstName=James,例如,http://localhost:4200/model-examples?firstName=James }

    (6)store.queryRecord()条件查询,查询条件为type以及自定义条件,同样也是一个get请求,返回结果同store.findRecord()

    model(){ this.store.queryRecord('model-example',{firstName:'James'}); //get 请求,请求为 域名/model-examples?firstName=James,例如,http://localhost:4200/model-examples?firstName=James,返回结果为promise,其中为一个record }

    创建record

    使用store.createRecord()来增加一个record。

    model(){ let a = this.store.createRecord('model-example',{ firstName:'firstName', secondName: 'secondName' }); return a; }

    则返回一个record。

    在运用场景上,我们可以设想这样一个场景,比如一个表单:

    //route route-example.hbs <form class="" action="index.html" method="post"> firstName:{{input value=model.firstName}} secondName:{{input value=model.secondName}} <button type="submit" name="button" {{action 'submitForm'}}>提交</button> </form> //route route-example.js import Ember from 'ember'; export default Ember.Route.extend({ model(){ return this.store.createRecord('model-example',{ firstName:'', secondName: '' }); }, actions:{ actionSubmit(){ let model = this.modelFor('route-example'); model.save(); //这里会发出一个post请求,即 域名/model-example, 这里是localhost:8000/model-example,参数为{"data":{"attributes":{"first-name":"<你填写的内容>","second-name":"<你填写的内容>"},"type":"model-examples"}} } } });

    生成的页面如下:

    这的数据是一个双向绑定的过程,在页面上的变动会直接变化到model上。

    更新record

    更新record的操作也是一样的

    this.store.findRecord('model-example', 1).then(function(data) { data.set('firstName', "name1"); });

    这样就可以对其进行修改。

    持久化record

    持久化,也就是说将数据存入数据库,实际上是一个与后端进行交互的过程。 调用sava()方法就可以。 但是不同于新建的post请求,所有更新操作的请求为PATCH请求。

    this.store.findRecord('model-example', 1).then(function(data) { data.set('firstName', "name1"); data.save() //patch 请求:域名/model-examples/1, 在这里为:http://localhost:4200/model-examples/1 //参数 {"data":{"id":"1","attributes":{"firstName":"asdas","secondName":"sn"},"type":"model-examples"}} });

    删除record

    使用deleteRecord()可以删除一个record

    this.store.findRecord('model-example', 1).then(function(data) { data.deleteRecord(); data.get('isDeleted');//true =>表示已经删除 });

    如果想要持久化到后端,调用sava()

    this.store.findRecord('model-example', 1).then(function(data) { data.deleteRecord(); data.get('isDeleted');//true =>表示已经删除 data.save();//这会发送一个DELETE请求,为 http://localhost:4200/model-examples/1 });

    或者直接调用

    this.store.findRecord('model-example', 1).then(function(data) { data.destroyRecord();//这会发送一个DELETE请求,为 http://localhost:4200/model-examples/1 });

    插入record

    ember还支持直接向store中插入record,但是这个过程不是与后端交互的过程。是通过push()方法实现的。

    //route route-example.js export default Ember.Route.extend({ model() { this.get('store').push({ data: [{ id: 1, type: 'model-example', attributes: { firstName: 'fn1', secondName: 'sn1', }, }, { id: 1, type: 'model-example', attributes: { firstName: 'fn1', secondName: 'sn1', }, }] }); } });

    这样就可以手动向其中插入两条record。例如,当时不想用他提供的方式如post、patch、delete进行增删改数据,那么可以使用ajax先更新或者插入数据,然后在手动push进store。

    小结

    总结一下增删改查的请求形式: //TODO

    adapters

    适配器,决定了数据如何持久化到后端。举例而言,请求的URL、REST API的header等。 创建适配器的命令,同样通过命令行就可以创建:ember g adapter <your-adapter-name>。这里注意,这里的名字必须和路由的是一致的,关于路由的规则,我们后面独立说。 以application这个路由为例,其适配器配置可能为:

    //app/adapters/application.js import DS from 'ember-data'; export default DS.JSONAPIAdapter.extend({ host: 'http://xxx.com', namespace: 'api/v1', pathForType: function(type) { return Ember.String.underscore(type); }, headers: { 'API_KEY': 'secret key', 'ANOTHER_HEADER': 'Some header value' } });

    下面解释一下这几个常用规则的配置:

    host,指域名namespace,命名空间,如上述的情况下,model名为model-example的新建请求为(忽略pathForType方法):http://xxx.com/api/v1/model-examplepathForType,修改model的适配方式,如果你希望都是下划线的方式,可以调用Ember.String.underscore()方法,就可以把驼峰或者中划线改为下划线,那么上述的情况下,新建的请求为:http://xxx.com/api/v1/model_exampleheaders,http的heads,这里是支持计算属性的,例如: export default DS.JSONAPIAdapter.extend({ session: Ember.inject.service('session'), headers: Ember.computed('session.authToken', function() { return { 'API_KEY': this.get('session.authToken'),//这里的headers取自session的authToken字段 'ANOTHER_HEADER': 'Some header value' }; }) });

    在适配器中,你还可以重写函数findRecord() findAll……等等:

    export default DS.JSONAPIAdapter.extend({ findRecord(store, type, id){ return Ember.$.getJson(`${this.get('host')}/${this.get('namespace')}/${type}/${id}`); } });

    序列化器serializers

    序列化器serializers主要负责用来格式化数据。这个在Ember Data中十分重要,因为本身model的数据格式十分蛋疼,用起来非常难受。

    创建serializers,也可以是命令行工具:ember g serializer <your-serializer-name>

    Ember Data提供了3种serializers的默认实现,分别为:

    JSONAPISerializer,2.0以后版本的默认实现JSONSerializer 针对单个json或者json array的简单实现RESTSerializer2.0以前版本的默认实现,较为复杂,可以支持边缘加载,即是通过增加数据层级来分步加载(可以理解为先加载第一层次的数据集合,然后按需加载子一级的数据集合)

    这意味着,根据自己的需求,继承其中任意一个类就可以。

    现在考虑标准格式的record:

    //单条record { "data": { "type": "people", "id": "123", "attributes": { "first-name": "Jeff", "last-name": "Atwood" } } } //recordArray { "data": [{ "type": "model-example", "id": "1", "attributes": { "firstName": "Jeff", "secondName": "Atwood" } }, { "type": "model-example", "id": "2", "attributes": { "firstName": "Yehuda", "secondName": "Katz" } }] } //如果数据除了本身之外还有关系数据,那么关系数据就放在`included`中 { "data": { "type": "articles", "id": "1", "attributes": { "title": "JSON API paints my bikeshed!" }, "links": { "self": "http://example.com/articles/1" }, "relationships": { "comments": { "data": [ { "type": "comments", "id": "5" }, { "type": "comments", "id": "12" } ] } } }, "included": [{ "type": "comments", "id": "5", "attributes": { "body": "First!" }, "links": { "self": "http://example.com/comments/5" } }, { "type": "comments", "id": "12", "attributes": { "body": "I like XML better" }, "links": { "self": "http://example.com/comments/12" } }] }

    我们从简单的情况入手,比如,正常情况下,我们的后端返回的数据格式可能为:

    { "result":[ { "id": 1, "firstName": "Jeff", "secondName": "Atwood" }, { "id": 1, "firstName": "Yehuda", "secondName": "Katz" } ] }

    这种情况下,如果返回的话,前端一定会报错,因为格式不匹配,找不到data。

    格式化内容数据

    import DS from 'ember-data'; export default DS.JSONAPISerializer.extend({ normalizeResponse(store, primaryModelClass, payload, id, requestType) { if (payload) { if (!payload.result){ let documentHash = {included:[]}; if(id) documentHash.data=null; else documentHash.data=[]; return documentHash; } return this._super(store, primaryModelClass, payload.result, id, requestType); } return this._super(...arguments); }, });

    这样,就可以将返回的result转化为data。

    反之,如果请求中,后端需要的内容与前端给的不一样,只需要重写serialize方法:

    import DS from 'ember-data'; export default DS.JSONSerializer.extend({ serialize: function(snapshot, options) { var json = this._super(...arguments); // ?? json.data.attributes.cost = { amount: json.data.attributes.amount, currency: json.data.attributes.currency }; delete json.data.attributes.amount; delete json.data.attributes.currency; return json; } });

    通过上述的方式,可以把前端发送的内容:

    { "data": { "attributes": { "id": "1", "name": "My Product", "amount": 100, "currency": "SEK" }, "type": "product" } }

    变为:

    { "data": { "attributes": { "id": "1", "name": "My Product", "cost": { "amount": 100, "currency": "SEK" } }, "type": "product" } }

    最后说两句,RESTSerializer的实现与其他两个不同,他没有规定返回的格式,也就是说可以是任意格式的,而其他的都是json。

    转载请注明原文地址: https://ju.6miu.com/read-664260.html

    最新回复(0)