0

Ember Data의 JSONAPIAdapter를 중첩 된 리소스와 함께 사용하려고합니다. 서버 부분에는 django-rest-framework-json-api가 사용됩니다.Ember 데이터 JSONAPIAdapter : 중첩 된 리소스를 가져옵니다.

내 (간체) 엠버 모델 :

Case.js라는

export default Model.extend({ 
    firstName: attr('string'), 
    lastName: attr('string'), 
    comments: hasMany('comment'), 
}) 

comment.js

export default Model.extend({ 
    text: attr('string'), 
    case: belongsTo('case'), 
}) 

/api/v1/cases/4에 대한 서버의 응답은 다음과 같습니다

{ 
    "data": [ 
    { 
     "type": "cases", 
     "id": "4", 
     "attributes": { 
     "first-name": "Hans", 
     "last-name": "Peter", 
     }, 
     "relationships": { 
     "comments": { 
      "meta": { 
      "count": 1 
      }, 
      "data": [ 
      { 
       "type": "comments", 
       "id": "5" 
      } 
      ], 
      "links": { 
      "related": "http://localhost:8000/api/v1/cases/4/comments" 
      } 
     } 
     } 
    } 
    ] 
} 

이제 엠버 데이터와 JSON-API 사양을 올바르게 이해하면 엠버가 의견을 참조 할 때 /api/v1/cases/4/comments을 요청해야합니다. 대신 /api/v1/comments/5을 요청하며 이는 분명히 404을 반환합니다. 요약

내 질문 :

  • 서버 응답이 JSON-API 사양을 준수 하는가?
  • 중첩 된 경로를 존중하려면 어떻게해야합니까?

저는 ember v2.8을 사용하고 있습니다.

보너스 질문 : 새 덧글 작성과 동일한 문제가 발생합니다. 대신 POST에서 /case/4/comments으로 어떻게 처리합니까?

+0

예이 작동하고 JSON이 어떻게 "는 의견을 참조하는"않습니다 올바른 보이는

<table class="table table-bordered table-striped table-condensed"> <thead> <tr> <th></th> <th>Name</th> </tr> </thead> <tbody> {{#each model.campaigns as |campaign|}} <tr> <td>{{campaign.name}}</td> </tr> {{/each}} </tbody> </table>
BHS

? 또한 내 게시물은 댓글 리소스에 직접 있습니다. –

+0

현재 템플릿에서'model.comments'에 액세스하고 있습니다. 이 문제에 관한 쉼터 공동체의 의견에 따르면 자원에 대한 액세스 방법과 관련된 몇 가지 미묘한 차이가 있습니다. –

+0

모델이 "대소 문자"의 인스턴스라고 가정하면 올바르게 보입니다. 나는 파이어베이스와 루프백을 사용하여 이것을했다. "미묘함"에 대해 확실하지 않습니다. 원한다면 json 샘플 및 코드 샘플을 사용하여 답변을 추가 할 것입니다. –

답변

1

JSON API 사양은 특정 URL 패턴을 적용하지 않으므로 준수해야합니다. 그러나 해결 방법이 있지만 Ember Data에서는 플랫 URL 구조로 작업하는 것이 더 쉽습니다.

ember-data-url-templates addon을보고 모델의 어댑터에 로직을 추가하는 것이 좋습니다. 이 부가 기능으로

는, 여기 당신이 app/adapters/comment.js로 할 수있는 것입니다 : 부가 기능이 극복 할 수 있다는 뭔가가없는

import ApplicationAdapter from './application'; 
import UrlTemplates from 'ember-data-url-templates'; 

export default ApplicationAdapter.extend(UrlTemplates, { 
    namespace: 'api/v1', // You may or may not need this namespace setting: 
         // I'm a little rusty in this area :) 

    urlTemplate: '{+host}/case/{caseId}/comments{/id}', 

    urlSegments: { 
    contentId: function(type, id, snapshot/*, query */) { 
     return snapshot.belongsTo('case', { id: true }); 
    } 
    } 
}); 

을,이 다음에 해당 URL 구조로 당신을 잠급 있다고 생각 전체 앱에 댓글을 달 수 있습니다. 따라서이 길로 내려 가기로 결정하기 전에 그 절충안의 무게를 재십시오.

+0

ember-data는 현재'POST' 또는'PATCH' 요청을 위해'related' 링크를 따르는 것을 지원하지 않기 때문에, URL을 평평하게하는 것이 옵션이 아니라면 갈 수있는 방법 인 것 같습니다 - 고마워요! –

+0

@czosel 반가워요. –

1

예이/

모델을 다음과 같이이 설정을해야 작동

export default DS.Model.extend({ 
    name: DS.attr('string'), 
    telno: DS.attr('string'), 

    campaigns: hasMany() 
}); 

모델을 client.js/

export default DS.Model.extend({ 
    name: DS.attr('string'), 
    startdate: DS.attr('date'), 
    enddate: DS.attr('date'), 

    client: DS.belongsTo('client') 
}); 

/템플릿/클라이언트/편집 client.js.

http://localhost:3000/api/clients/1

{ 
{ 
    "links": { 
    "self": "http://localhost:3000/api/clients/1" 
    }, 
    "data": { 
    "type": "clients", 
    "relationships": { 
     "campaigns": { 
     "links": { 
      "related": "http://localhost:3000/api/clients/1/campaigns" 
     } 
     } 
    }, 
    "id": "1", 
    "attributes": { 
     "name": "Test", 
     "telno": "123" 
    }, 
    "links": { 
     "self": "http://localhost:3000/api/clients/1" 
    } 
    } 
} 

http://localhost:3000/api/clients/1/campaigns

{ 
    "links": { 
    "self": "http://localhost:3000/api/clients/1/campaigns" 
    }, 
    "data": [ 
    { 
     "type": "campaigns", 
     "relationships": { 
     "client": { 
      "links": { 
      "related": "http://localhost:3000/api/campaigns/1/client" 
      } 
     } 
     }, 
     "id": "1", 
     "attributes": { 
     "enddate": "2019-01-01T00:00:00.000Z", 
     "name": "test", 
     "startdate": null 
     }, 
     "links": { 
     "self": "http://localhost:3000/api/campaigns/1" 
     } 
    } 
    ] 
} 
+0

'ember-data-url-templates' 접근법을 사용하기로 결정했기 때문에 POST와 PATCH에 중첩 된 경로를 호출해야하기 때문에 위의 내용을 참조하십시오. 어쨌든 이것을 게시 해 주셔서 감사합니다. 다음에 'GET'만 필요할 때이 방법을 시도해 보겠습니다! –

관련 문제