2016-08-30 2 views
1

나는 매우 간단한 문제라고 생각하지만이 데이터 조작 방법을 알지 못합니다. This 나는 Ember와 같은 느낌의 고통이 있긴하지만 슬프게도 도움이되지 못했습니다.EmberJS 2.7 스토어에서 반환 된 데이터의 재구성/재 형식화/사용자 정의 방법

행/dashboard.js : 여기서

라우트이다

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    // this is for testing, normally we get the data from the store 
    model: function() { 
     return this.get('modelTestData'); 
    }, 

    modelTestData: [{ 
     name: 'gear', 
     colorByPoint: true, 
     data: [ 
      {y: 10, name: 'Test1'}, 
      {y: 12, name: 'Test2'}, 
      {y: 40, name: 'Test3'} 
      ] 
    }], 

}); 

'modelTestData'개체의 구조가 필요한 하위 구성 요소에 전달 될 때처럼 정확히이어야 그것은 그런 식으로 구조화되었습니다.

나는 쉽게 API에서 내 데이터를 얻을 및 모델에 넣어 수 있습니다

model: function() { 
    return this.store.get('category'); 
}, 

그러나 나는 그것을 재구성 할 필요가 ...하지만 어떻게?

나는 어떻게 든 범주 컬렉션을 반복하고 각 레코드의 데이터 부분을 추출하여 modelTestData 개체의 '데이터'부분을 대체해야합니다.

그래서 나는 완전히 난처한 상황에 빠진 오전 3 문제가 있습니다

  1. 어떻게 '얻을'하기를 내가 모델에서 필요로하는 속성?
  2. 'y'와 'name'을 사용하여 개체를 배열하는 방법은 무엇입니까?
  3. 어떻게 구조를 하드 코딩하지 않고 modelTestData의 'data'속성에 할당합니까?

카테고리는 JSONAPI 개체를 다음과 같이이다 :

{ 
    "data":[ 
     { 
     "id":"1", 
     "type":"categories", 
     "attributes":{ 
      "name":"Carrying system", 
      "total-grams":"0.0" 
     } 
     }, 
     { 
     "id":"2", 
     "type":"categories", 
     "attributes":{ 
      "name":"Shelter system", 
      "total-grams":"0.0" 
     } 
     } 
    ] 
} 

내가 'Y'와 modelTestData에서 '이름'으로 이름으로 g 값을 매핑해야합니다.

카테고리 데이터는 API에서 반환 한 것과 다른 용도로 다른 경로에서 사용됩니다. 따라서 모델 구조 자체 나 API가 반환하는 것을 변경하고 싶지는 않습니다. 원래 구조에서 '카테고리'를 사용하는 앱의 다른 부분을 깨뜨릴 것입니다.

이 경로는 modelTestData의 구조에 따라 하위 구성 요소에 전달할 데이터를 마사지해야하는 특정 사용 사례입니다.

이 데이터 조작 작업이 경로에 속해 있는지 궁금합니다. 내가이 일을 관리해야

model: function() { 
    return this.store.get('categoryWeights'); 
}, 

편집 :

은 어떻게 든 'categoryWeights'그래서 난 후 할 수있는 말과 같은 새로운 구조를 창조하는 serliazer 어댑터에서이 작업을 수행해야 경로에서, 그러나 그것은 단지 나에게 일련의 물건을 준다. 2 개의 속성과 포함 된 개체 배열을 포함하는 단일 개체가 필요합니다.

model() { 
    return this.store.findAll('category') 
     .then(categories => categories.map(category => { 
      let data = { 
       y: category.get('totalGrams'), 
       name: category.get('name') 
      }; 
      return data; 
     })) 
    },  

답변

1

이 아마 계산 된 재산에 가야한다 :

dataForSubModel: Ember.computed('[email protected]', '[email protected]', { 
    get() { 
    return [{name: 'gear', colorByPoint: true, this.get('model').map(m => ({y:m.get('totalGrams'), name:m.get('name')}))} 
    } 
}), 

시리얼 라이저가 잘못된 장소, 때문에이 아니 서버와 응용 프로그램 사이를 변환해야하지만 응용 프로그램과 사이 이상한 구성 요소. 실제로 가장 좋은 것은 구성 요소를 리팩토링하는 것입니다.

+0

제 3 자 구성 요소이기 때문에 구성 요소를 리팩터링 할 수 없습니다. 하지만 네가 맞습니다. 앱과 구성 요소 사이에 있습니다. 따라서 올바른 방법이 될 것 같습니다. 또한이 코드가 내 솔루션보다 더 쉽게 이해할 수 있습니다! – rmcsharry

0

오케이 내가 경로에서 작업하게되었습니다.

model() { 
return this.store.findAll('category') 
    .then(function(categories) { 
     let data = []; 
     data = categories.map(category => { 
      return { 
       y: category.get('totalGrams'), 
       name: category.get('name') 
       } 
      }); 
     return [{name: 'gear', colorByPoint: true, data}]; 
    }) 
}, 

나는 여전히이 어댑터 또는 시리얼에서 수행되어야하는 느낌이 듭니다. 그렇게하는 방법을 보여주는 해답을 보게되어 기쁠 것입니다.