programing

ember.js용 커스텀 어댑터를 작성하려면 어떻게 해야 합니까?

goodsources 2023. 3. 22. 21:08
반응형

ember.js용 커스텀 어댑터를 작성하려면 어떻게 해야 합니까?

ember.js를 사용할 예정인데 REST API가 패키지 REST 어댑터와 정확히 일치하지 않습니다.저는 "오버라이드"를 해서 저만의 아약스를 넣을 수 있게 하고 싶습니다.ember findAll이 페이지 번호부여 옵션 없이 모든 문서를 검색하여 다른 쿼리 매개 변수와 함께 유용하게 사용하는 것이 싫습니다. 이 때문에 나는 나만의 Ajax를 작성하려고 합니다.이 작업을 수행하는 방법에 대한 문서를 찾을 수 없습니다.

Ember 데이터의 경우

이것은 Ember Data 1.0 베타 9의 최신 버전입니다.

Ember 데이터 어댑터 중 하나를 확장합니다.사이트를 넓히려면:

App.ApplicationAdapter = DS.RESTAdapter.extend(....

모델을 특정하려면:

App.FooAdapter = DS.RESTAdapter.extend(...

그런 다음 재정의할 구현을 정의합니다.언제든지 전화하실 수 있습니다.this._super기본 구현으로 되돌릴 수 있습니다.

App.NotesAdapter = DS.RESTAdapter.extend({
  find: function(store, type, id) {
    id = "foo" + id;
    return this._super(store, type, id);
  }
});

또는 구현을 완전히 덮어쓸 수도 있습니다.

App.NotesAdapter = DS.RESTAdapter.extend({
  find: function(store, type, id) {
    // Do your thing here
    return this.ajax(this.buildURL(type.typeKey, id), 'GET');
  },

  findAll: function(store, type, sinceToken) {
    // Do your thing here
    var query;

    if (sinceToken) {
      query = { since: sinceToken };
    }

    return this.ajax(this.buildURL(type.typeKey), 'GET', { data: query });
  },

  findQuery: function(store, type, query) {
    // Do your thing here
    return this.ajax(this.buildURL(type.typeKey), 'GET', { data: query });
  },

  findMany: function(store, type, ids, owner) {
    return this.ajax(this.buildURL(type.typeKey), 'GET', { data: { ids: ids } });
  },
   .....
});

전체 API를 확인하려면 http://emberjs.com/api/data/classes/DS.RESTAdapter.html를 참조하십시오.

시리얼라이저

대부분의 경우 가장 중요한 것은 데이터를 휴면 엔드포인트에 맞게 마사지하기 위해 자체 시리얼라이저를 롤링하는 것입니다.다음은 이행문서http://https://github.com/emberjs/data/blob/master/TRANSITION.md 에서 입수할 수 있는 유용한 정보입니다.

요약하면 Ajax 요구가 완료되면 결과 payload가 다음 훅을 통해 전송됩니다.

  1. 페이로드는 원래 요구가 단일 레코드(검색/저장 등)에 대한 경우 extractSingle로 전송되며, 원래 요구가 레코드 배열(findAll/findQuery 등)에 대한 경우 extractArray로 전송됩니다.
  2. 이러한 방식의 기본 동작은 페이로드의 최상위 수준을 여러 개의 작은 레코드로 분리하는 것입니다.
  3. 이러한 작은 레코드는 각각 정규화를 위해 전송되며, 한 번에 레코드를 정규화할 수 있습니다.
  4. 마지막으로 특정 유형의 레코드를 특별히 정규화할 수 있습니다.
앱.PostSerializer = DS.RESTSerializer.extend({)extract Single: 함수(스토어, 유형, 페이로드, ID) {// 마사지이것._super(스토어, 유형, 페이로드, ID);},extractArray: 함수(스토어, 유형, 페이로드) {// 마사지이것._super(스토어, 타입, 페이로드);},정규화: 함수(유형, 해시, 속성) {// 마사지이것._super(타입, 해시, 속성);
}});
  • extract Single 및 extract Array를 사용하여 페이로드의 최상위 레벨이 Ember Data가 예상하는 것과 다르게 구성되는 경우
  • payload 내의 모든 서브해시를 같은 방법으로 정규화할 수 있는 경우 normalize를 사용하여 서브해시를 정규화합니다.
  • 정규화하다특정 서브 해시를 정규화하기 위한 해시.
  • extractSingle, extractArray 또는 정규화를 덮어쓰고 나머지 체인이 호출되도록 하려면 super를 호출해야 합니다.

나만의 롤링

App.FooAdapter = Ember.Object.extend({
  find: function(id){
    return $.getJSON('http://www.foolandia.com/foooo/' + id);
  }
});

그럼 당신의 경로나 어디서든

App.FooRoute = Ember.Route.extend({
  model: function(){
    var adapter = App.FooAdapter.create();
    return adapter.find(1);
  }
});

이제 개인적으로는 생활을 편하게 하기 위해 어댑터를 경로에 삽입할 수 있습니다.

App.initializer({
    name: "fooAdapter",

    initialize: function (container, application) {
        application.register("my:manager", application.FooAdapter);
        application.inject("controller", "fooAdapter", "my:manager");
        application.inject("route", "fooAdapter", "my:manager");
    }
});

그러면 경로에서 더 게으르게 다음과 같은 작업을 수행할 수 있습니다.

App.FooRoute = Ember.Route.extend({
  model: function(){
    return this.fooAdapter.find(1);
  }
});

예: http://emberjs.jsbin.com/OxIDiVU/676/edit

Ember 데이터 없음 Ember: Ember 데이터 없음 Ember에 대한 자세한 내용을 볼 수 있습니다.

저도 같은 문제가 있었어요.저도 백엔드(cakePHP)와 조금 다른 포맷을 사용하고 싶었기 때문에 방법을 알 수 없었습니다.이전 답변은 훌륭하지만 모든 방법을 재정의할 필요는 없으며 빌드를 재정의하여 URL 형식을 변경할 필요가 있습니다.RESTAdapter의 URL.

예를 들어, 나는 케이크를 사용하고 싶다.PHP의 내선번호는 다음과 같습니다.애플리케이션 전체:

  • /users.json (find All)
  • /users/view/1.json (검색)
  • /users/delete/1.json
  • /users/edit.json(POST)
  • /users/add.json(POST)

여러 번 머리를 잡아당겨 엠버 데이터가 필수라는 것을 깨달은 후 다음 코드를 사용했습니다.

App.ApplicationAdapter = DS.RESTAdapter.extend({
  buildURL: function(type, id) {
    var url = '/' + this.pluralize(type.typeKey);

    if (id) {
        url += '/' + id;
    }

    url += '.json';

    return url;
  }
});

Ember의 문서는 좋지만 대부분의 예제는 FIXTURE 데이터를 사용합니다.상황에 따라 다른 유형의 어댑터를 쓰는 간단한 예시가 있었으면 합니다.

어댑터 자체를 코드화하는 사용자는 어댑터에서 값(예: userId)을 반환해야 하는 경우 json 또는 promise를 반환할 수 있습니다.다음은 약속을 반환하는 예입니다.

App.RequestAdapter = Ember.Object.extend({
    newRequest: function (data) {
        return new Ember.RSVP.Promise(function (resolve, reject) {
            Ember.$.ajax({
                type: 'POST',  // method post
                url: '/Request/Create', //target url
                data: JSON.stringify(data), //the JSON.stringify converts data to JSON
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (response) {
                    resolve(response);
                },
                error: function (reason) {
                    reject(reason);
                }
            });
        });
    }
});

//use this adapter in  your controller
var adapter = App.RequestAdapter.create();

adapter.newRequest(data).then(function (response) {   //newRequest is method of our adapter
    console.log(response.userId);  //specify response data
}, function(error){
    //handle error  
});

Ember의 약속에 대한 자세한 내용은 https://hackhands.com/3-ways-ember-js-leverages-promises/ 또는 http://emberjs.com/api/classes/RSVP.Promise.html를 참조하십시오.

언급URL : https://stackoverflow.com/questions/17938294/how-do-you-create-a-custom-adapter-for-ember-js

반응형