2012-06-26 1 views
1

나는 (일반적으로 런타임에 검색되는) 데이터 값을 양식 요소에 바인딩해야하는 시나리오가 있습니다. 이 경우 요소는 임의의 길이 데이터 집합에 대해 반복적으로 렌더링되는 Ember.Select입니다.Ember에 바인딩. atemplate 루프 내에서 선택

jsFiddle 여기

두 생성 선택 요소가 다른 데이터 구조에 기초
window.App = Ember.Application.create(); 

App.Person = Ember.Object.extend({ 
    id: null, 
    firstName: null, 
    lastName: null, 

    fullName: function() { 
     return this.get('firstName') + " " + this.get('lastName'); 
    }.property('firstName', 'lastName').cacheable() 
}); 


App.peopleController = Ember.ArrayController.create({ 
    content: [ 
     App.Person.create({id: 1,firstName: 'Yehuda',lastName: 'Katz'}), 
     App.Person.create({id: 2,firstName: 'Tom',lastName: 'Dale'}), 
     App.Person.create({id: 3,firstName: 'Peter',lastName: 'Wagenet'}), 
     App.Person.create({id: 4,firstName: 'Erik',lastName: 'Bryn'}) 
    ] 
}); 

App.simpleSelectionArray = Ember.ArrayController.create({ 
    content: [ 
     App.peopleController.objectAt(1) 
    ]}); 

App.selectionArray = Ember.ArrayController.create({ 
    content: [ 
     { 
      id: '2', 
      person: Ember.computed(function(key, value) { 
       if (arguments.length === 1){ 
        var personId = this.get('id'); 
        console.log(personId); 
        var listedPerson = App.peopleController.content.findProperty("id", personId); 
        return listedPerson ; 
       }else{ 
        this.set(key,value); 
        return value; 
       } 
      }).property('id').cacheable() 
     },      
    ]}); 

​ 

simple example

<script type="text/x-handlebars"> 
{{#each App.simpleSelectionArray.content}} 
{{this.firstName}} 
    {{view Ember.Select 
     contentBinding="App.peopleController.content" 
     selectionBinding="this" 
     optionLabelPath="content.fullName" 
     optionValuePath="content.id"}} 

    <p>Selected: {{this.fullName}} 
    (ID: {{this.id}})</p> 
{{/each}} 

{{#each App.selectionArray.content}} 
{{this.person.firstName}} 
    {{view Ember.Select 
     contentBinding="App.peopleController.content" 
     selectionBinding="this.person" 
     optionLabelPath="content.fullName" 
     optionValuePath="content.id"}} 

    <p>Selected: {{this.person.fullName}} 
    (ID: {{this.person.id}})</p> 
{{/each}} 
</script> 
찾을 수있다. 첫 번째 (대부분)는 바인딩 포스트 선택을 제외하고 예상대로 작동합니다.

더 일반적인 두 번째 데이터 구조가 전혀 작동하지 않습니다.

의견이 있으십니까?

+0

흠, 당신의 질문을 이해할 수 있을지 모르겠다. 당신은 반복하고자하는 아이템의 배열을 가지고 있으며 각 반복 안에는 '