Emberjs : 부모와 자식의 데이터로 복잡한 작업 만들기

Question

그래서 건물에이 엠버 앱이 있으며 지금까지 모든 것이 원활하게 진행되었습니다. 나는 약간의 잼에 빠졌고, 내가해야 할 일을 이해할 수는 없지만, 내가하고 싶은 것을 알고있다. 내가 갇혀있는 장소는 다음과 같습니다. 사용자에 대한 모든 녹음 내용을 표시하고 각 녹음 내용에 대해 필터링 된 버전이 1 ~ 2 개 (어쩌면 나중에 더 있음)가됩니다. 모든 사용자 기록을 표시하는 표에서 각 버전에 대한 링크를 렌더링하고 싶습니다. 현재 우리는 녹음에 대한 공개 ID에 무엇인가를 추가하여 API에서 해당 링크를 형성합니다. 그것은 "검색"에 대한 테이블 셀에, 명확하지 않으면

이

//models 
App.User = DS.model.extend({ 
    first_name: DS.attr('string'), 
    last_name: DS.attr('string') 
    recordings: DS.hasMany(App.Recording) 
}); 

App.Recording = DS.model.extend({ 
    name: DS.attr('string'), 
    filter: DS.hasMany(App.Filter) 
}); 

App.Filter = DS.model.extend({ 
    name: DS.attr('string'), 
    linkPrefix: DS.attr('string') 
}); 

//router 
App.Router.map(function(){ 
    this.resource('user', {path: '/:user_id'}, function(){}); 
}); 

//User template 

<script type="text/x-handlebars" data-template-name="user"> 
    <table class="table"> 
     <thead> 
     <tr> 
      <th>Recording Name</th> 
      <th>Filters</th> 
     </tr> 
     </thead> 
     <tbody> 
     {{#each recording in recordings}} 
     <tr> 
      <td>{{name}}</td> 
      <td> 
      {{#each filter in recording}} 
       //pseudocode here: {{#view should combine linkPrefix + recording_id contentBinding="recording" (maybe??)}}{{filter.name}}{{/view}} 
       //also need this link to handle the click and set it to "read" once the link has been clicked 
      {{/each}} 
      </td> 
     </tr> 
     {{/each}} 
     </tbody> 
    </table> 
    </div> 
</script> 

내가 "필터링되지 않은"과 같은 이름을 표시하려면 : 그래서 여기

내가 대해 질문하고 무엇을 설명하는 데 도움이되는 몇 가지 의사입니다 "향상된". 각 이름은 해당 탭의 새 탭에서 열어야하는 적절한 버전의 녹음에 연결되어야합니다.

잠시 동안 고민 끝에 부모 레코딩 ID와 자식 linkPrefix를 뷰로 렌더링하는 방법을 알 수 없었습니다. 큰 문제는 부모 레코딩과 하위 필터를 "알 수있는"뷰를 얻을 수 없다는 것입니다. Filter.name은 케이크 조각 이었지만 이것이 "엠버 방식"이 아닌가하는 두려움이 있습니다. 내 내장은 심지어 각 루프를 사용하지 않고도이 부분을 수행 할 수있는 방법이 있다고 말합니다. 생각?

Answer 1

필터가 몇 가지 추가 속성을 추가하는 데 필요한 것 같습니다. 먼저 레코딩에 도달 할 수 있도록 belongsTo 관계를 추가 한 다음 레코딩 및 linkPrefix가 지정된 필터 URL을 반환하는 계산 된 속성을 추가합니다.

App.Filter = DS.model.extend({ 
    name: DS.attr('string'), 
    linkPrefix: DS.attr('string'), 
    recording: DS.belongsTo(App.Recording), 
    link: function() { 
    return this.get('linkPrefix') + this.get('recording.id') 
    }.property('linkPrefix', 'recording') 
}); 

는 이제 핸들 템플릿은 간단하다 점점 가까이에

 {{#each filter in recording}} 
      <a {{action markFilterAsRead filter}} {{bindAttr href="filter.link"}}>{{filter.name}}</a> 
     {{/each}}