Ember.js : CollectionView의 특정 항목에 어떻게 액세스합니까?

Question

먼저 나는 ember.js를 정말 좋아한다고 말하고 싶다. Knockout과 Angular를 모두 시험해 보았으나 눈에 잘 띄지는 않았지만 모든 것이 자신의 방식대로 이루어져야했습니다. 나는 엠버 (ember)가 너에게 맞는 모습을 좀 더 자유롭게 구조화 할 수있는 것처럼 느낀다. 그 말로는 두 가지 질문이 있습니다.

. 나는이 작동하지 않습니다 분명히 다음과 같은 것을 할 싶습니다 만들기 위해 내가 가진 것

대신

<a href="/item/{{ content.id }}"><h3>{{ content.name }}</h3></a>

을 바인딩 : 내가 URL 경로를 만들려면 어떻게해야합니까

<a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>

을 보기에서? 모델에 url이라는 계산 된 속성을 쉽게 만들 수는 있지만 그다지 끔찍하고 MVC가 아닙니다. 요소에 대한 새로운 뷰를 생성해야하거나 약간 번거롭다고 느끼는 도우미를 등록해야합니까?

App = Ember.Application.create(); 

var sampleData = [ Ember.Object.create({ id: '123456789', name: 'John' }), Ember.Object.create({ id: '987654321', name: 'Anne' }) ] 

App.itemController = Ember.ArrayController.create({ 
    content: sampleData, 
    removeItem: function(item) { 
     this.content.removeObject(item); 
    } 
}); 

App.ItemListView = Ember.View.extend({ 
    itemDetailView: Ember.CollectionView.extend({ 
     contentBinding: 'App.itemController', 
     itemViewClass: Ember.View.extend({ 
      tagName: 'li', 
      url: '' // HOW TO GET '/item/123456789' 
      deleteButton: Ember.Button.extend({ 
       click: function(event) { 
        var item = this.get('content'); 
        App.itemController.removeItem(item); 
       } 
      }) 
     }) 
    }) 
}); 

<script type="text/x-handlebars"> 
    {{#view App.ItemListView}} 
     <ul id="item-list"> 
      {{#collection itemDetailView}} 
       <div class="item"> 
        <a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a> 
        {{#view deleteButton class="btn" contentBinding="content"}}Delete{{/view}} 
       </div> 
      {{/collection}} 
     </ul> 
    {{/view}} 
</script> 

2 :

여기에 전체 코드입니다. 보기가 컨트롤러를 "소유"하고 다른 방향으로는 움직이지 않는다고 생각합니다. 뷰를 재사용 할 수 있도록 뷰에 어떤 컨트롤러가 연결되어 있는지 인식하지 않아야합니까? 내가보기에 선 이들에 대해 생각하고 있어요 :

contentBinding: 'App.itemController',

및

App.itemController.removeItem(item);

방법이를 구성 할을?

. 나는 모든 것이 진행중인 것임을 깨닫고 이름이 바뀌었을 때 아주 새롭다. 그러나 문서는 모두 아주 분명하지 않다. 예에서는 이전 네임 스페이스 SC를 사용하며 컬렉션, arraycontroller와 같은 Sproutcore 2.0 안내서와 비교하여 emberjs.com에서 누락 된 사항이 많이 있습니다. 나는 콜렉션이 단계적으로 사라지도록 여기 어딘가에서 읽었다. 그건 사실이고 대신 #each를 사용해야합니까?

여러분의 도움과 멋진 프레임 워크에 감사드립니다!

Answer 1

1) <a href="...">을 사용하려면 계산 된 속성이 필요합니다. 그것은 당신의 모델이나 전망에있을 수 있습니다. 또 다른 방법은 Ember.Button을 사용하는 것입니다. {{#view Ember.Button tagName="a" target="..." action="..."}}...{{/view}}

2. 일반적으로 컨트롤러 바인딩은보기가 아닌 템플릿에서 선언해야합니다. 예 : {{#view App.ItemListView contentBinding="App.itemController"}}

3) 3. #collection 도우미는 더 이상 사용되지 않으므로 대신 #each을 사용해야합니다.