使用Ember Data将REST请求发送到嵌套的API端点URL [英] Sending REST requests to a nested API endpoint URL using Ember Data

问题描述

如果你想像这样定义的两个模型：

  App.User = DS.Model.extend（{
电子邮件：DS.hasMany（'email'，{embedded：'always'}），
}）; 
 
 App.Email = DS.Model.extend（{
 address：DS.attr（'string'），
 alias：DS.attr（'string'），
用户：DS.belongsTo（'user'）
}）; 
  

...和一个REST适配器：

  App.UserAdapter = DS.RESTAdapter.extend（{
 url：'http://whatever.com'，
 namespace：'api / v1'
}）; 
  

...路由设置如下：

pre> App.Router.map（function（）{
this.route（'index'，{path：'/'}）;
这个。资源（'users'，function（）{
this.route（'index'）;
this.route（'add'）;
this.resource（'user'，{path ：'：user_id'}，function（）{
this.route（'delete'）;
this.route（'edit'）;
this.resource（'emails' （）{
this.route（'index'）;
this.route（'add'）;
this.resource（'email'，{path：'：email_id'}， function（）{
this.route（'delete'）;
this.route（'edit'）;
}）;
}）;
}） ;
}）;
}）;


...和一个控制器操作来保存编辑的电子邮件，如下所示：

  App.EmailEditController = Ember.ObjectController.extend（{
 actions：{
 save：function（）{
 var self = this; 
 var email = this.get（'model'）; 
 email.save（）然后（function（）{
 self.transitionToRoute '，email）; 
}）; 
} 
} 
}）; 
  

问题是这个...

PUT请求被发送到： http://whatever.com/api/v1 / emails / [email_id]

然而，正确的API端点是： http://whatever.com/api/v1/users/ [user_id] / emails / [email_id]

解决问题的方法是什么？

解决方案

只是在REST适配器中重写createRecord，updateRecord和deleteRecord。

我对受影响的模型添加了一个父属性。在*记录钩子中，我可以检查是否设置了，并且相应地编辑发送到buildURL的路径。

我的createRecord，updateRecord和deleteRecord钩子现在看起来像这样：

  App.UserAdapter = DS.RESTAdapter.extend（{
 
 createRecord：function（store，类型，记录）{
 
 if（！record.get（'parent'）|| null === record.get（'parent'））{
 return this._super（store ，type，record）; 
} 
 
 var data = {}; 
 var serializer = store.serializerFor（type.typeKey）; 
 
 var parent_type = record.get（'parent'）; 
 var parent_id = record.get（parent_type）.get（'id'）; 
 var child_type = Ember.String.camelize（
 Ember （
 
 record.get b 
 var path = Ember.String.pluralize（parent_type）+'/'+ parent_id +'/'+ child_type; 
 
 serializer.serializeIntoHash（data，type，record，{includeId：true}）; 
 
 return this.ajax（this.buildURL（path），POST，{data：data}）; 
}，
 
 updateRecord：function（store，type，record）{
 
 if（！record.get（'parent'）|| null === record.get（'parent'））{
 return this._super（store，type，record）; 
} 
 
 var data = {}; 
 var serializer = store.serializerFor（type.typeKey）; 
 
 var parent_type = record.get（'parent'）; 
 var parent_id = record.get（parent_type）.get（'id'）; 
 var child_type = Ember.String.camelize（
 Ember.String.pluralize（
 type.typeKey.split（
 record.get（'parent'）
） .pop（）
）
）; 
 
 var path = Ember.String.pluralize（parent_type）+'/'+ parent_id +'/'+ child_type; 
 
 serializer.serializeIntoHash（data，type，record）; 
 var id = record.get（'id'）; 
 
 return this.ajax（this.buildURL（path，id），PUT，{data：data}）; 
}，
 
 deleteRecord：function（store，type，record）{
 
 if（！record.get（'parent'））{
 return this._super（store，type，record）; 
} 
 
 var parent_type = record.get（'parent'）; 
 var parent_id = record.get（'parent_id'）; 
 var child_type = Ember.String.camelize（
 Ember.String.pluralize（
 type.typeKey.split（
 record.get（'parent'）
） .pop（）
）
）; 
 
 var path = Ember.String.pluralize（parent_type）+'/'+ parent_id +'/'+ child_type; 
 var id = record.get（'id'）; 
 
 return this.ajax（this.buildURL（path，id），DELETE）; 
} 
 
}）; 
  

示例中的电子邮件模型将如下所示：

  App.Email = DS.Model.extend（{
 address：DS.attr（'string'），
 alias：DS.attr 'string'），
 user：DS.belongsTo（'user'），
 parent：'user'
}）; 
  

If you imagine two models defined thus:

App.User = DS.Model.extend({
    emails: DS.hasMany('email', {embedded: 'always'}),
});

App.Email = DS.Model.extend({
    address: DS.attr('string'),
    alias: DS.attr('string'),
    user: DS.belongsTo('user')
});

... and a REST Adapter:

App.UserAdapter = DS.RESTAdapter.extend({
    url: 'http://whatever.com',
    namespace: 'api/v1'
});

... with routing set up like so:

App.Router.map(function () {
    this.route('index', { path: '/' });
    this.resource('users', function () {
        this.route('index');
        this.route('add');
        this.resource('user', { path: ':user_id' }, function () {
            this.route('delete');
            this.route('edit');
            this.resource('emails', function () {
                this.route('index');
                this.route('add');
                this.resource('email', { path: ':email_id' }, function () {
                    this.route('delete');
                    this.route('edit');
                });
            });
        });
    });
});

... and a controller action to save the edited email, which looks like this:

App.EmailEditController = Ember.ObjectController.extend({
    actions: {
        save: function () {
            var self = this;
            var email = this.get('model');
            email.save().then(function(){
                self.transitionToRoute('email', email);
            });
        }
    }
});

The issue is this...

The PUT request is being sent to: http://whatever.com/api/v1/emails/[email_id]

However the correct API endpoint is: http://whatever.com/api/v1/users/[user_id]/emails/[email_id]

What is the correct way to remedy this issue?

解决方案

The solution I came up with was just to rewrite createRecord, updateRecord and deleteRecord in the REST adapter.

I added a 'parent' attribute to the models affected. In the *Record hooks, I can check if this is set and edit the path sent to buildURL accordingly.

My createRecord, updateRecord and deleteRecord hooks now looks something similar to this:

App.UserAdapter = DS.RESTAdapter.extend({

    createRecord: function (store, type, record) {

        if (!record.get('parent') || null === record.get('parent')) {
            return this._super(store, type, record);
        }

        var data = {};
        var serializer = store.serializerFor(type.typeKey);

        var parent_type = record.get('parent');
        var parent_id = record.get(parent_type).get('id');
        var child_type = Ember.String.camelize(
            Ember.String.pluralize(
                type.typeKey.split(
                    record.get('parent')
                ).pop()
            )
        );

        var path = Ember.String.pluralize(parent_type) + '/' + parent_id + '/' + child_type;

        serializer.serializeIntoHash(data, type, record, { includeId: true });

        return this.ajax(this.buildURL(path), "POST", { data: data });
    },

    updateRecord: function(store, type, record) {

        if(!record.get('parent') || null === record.get('parent')){
            return this._super(store, type, record);
        }

        var data = {};
        var serializer = store.serializerFor(type.typeKey);

        var parent_type = record.get('parent');
        var parent_id = record.get(parent_type).get('id');
        var child_type = Ember.String.camelize(
            Ember.String.pluralize(
                type.typeKey.split(
                    record.get('parent')
                ).pop()
            )
        );

        var path = Ember.String.pluralize(parent_type) + '/' + parent_id + '/' + child_type;

        serializer.serializeIntoHash(data, type, record);
        var id = record.get('id');

        return this.ajax(this.buildURL(path, id), "PUT", { data: data });
    },

    deleteRecord: function (store, type, record) {

        if (!record.get('parent')) {
            return this._super(store, type, record);
        }

        var parent_type = record.get('parent');
        var parent_id = record.get('parent_id');
        var child_type = Ember.String.camelize(
            Ember.String.pluralize(
                type.typeKey.split(
                    record.get('parent')
                ).pop()
            )
        );

        var path = Ember.String.pluralize(parent_type) + '/' + parent_id + '/' + child_type;
        var id = record.get('id');

        return this.ajax(this.buildURL(path, id), "DELETE");
    }

});

The Email model in the example would be something like:

App.Email = DS.Model.extend({
    address: DS.attr('string'),
    alias: DS.attr('string'),
    user: DS.belongsTo('user'),
    parent: 'user'
});

这篇关于使用Ember Data将REST请求发送到嵌套的API端点URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！