2012-08-10 53 views
1

我有一些事情是這樣的:emberjs Ember.Select動態contentBinding

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') 
}); 

App.selectedPersonController = Ember.Object.create({ 
    person: null 
}); 

App.selectedChildrenController = Ember.Object.create({ 
    person: null 
}); 

App.peopleController = Ember.ArrayController.create({ 
    content: [ 
     App.Person.create({ 
     id: 1, 
     firstName: 'John', 
     lastName: 'Doe' 
    }), 
     App.Person.create({ 
     id: 2, 
     firstName: 'Tom', 
     lastName: 'Cruise' 
    }), 
     App.Person.create({ 
     id: 3, 
     firstName: 'Peter', 
     lastName: 'Pan' 
    }), 
     App.Person.create({ 
     id: 4, 
     firstName: 'Sergey', 
     lastName: 'Brin' 
    }) 
     ] 

}); 

App.childrenController = Ember.ArrayController.create({ 
    children: [ 
     App.Person.create({ 
     person_id: 1, 
     firstName: 'Scott', 
     lastName: 'Hall' 
    }), 
     App.Person.create({ 
     person_id: 1, 
     firstName: 'Jim', 
     lastName: 'Can' 
    }), 
     App.Person.create({ 
     person_id: 2, 
     firstName: 'Will', 
     lastName: 'Smith' 
    }), 
     App.Person.create({ 
     person_id: 4, 
     firstName: 'Bale', 
     lastName: 'Ron' 
    }) 
     ], 
    active: function() { 
     if (App.selectedPersonController.person) { 
      return this.get("children").filterProperty("person_id", App.selectedPersonController.person.id); 
     } 
     else { 
      return null; 
     } 
    }.property("App.selectedPersonController.person").cacheable() 

}); 


window.App.Select = Ember.Select.extend({ 
    contentChanged: function() { 
     this.$().selectBox('destroy').selectBox(); 
    }.observes('content') 

}); 

和我的視圖代碼是這樣的:

<script type="text/x-handlebars"> 
    {{view window.App.Select 
     contentBinding="App.peopleController" 
     selectionBinding="App.selectedPersonController.person" 
     optionLabelPath="content.fullName" 
     optionValuePath="content.id" 
     prompt="Pick a person:"}} 

    {{view window.App.Select 
     contentBinding="App.childrenController.active" 
     selectionBinding="App.selectedChildrenController.person" 
     optionLabelPath="content.fullName" 
     optionValuePath="content.id" 
     prompt="Pick a child:"}} 

    <p>Selected: {{App.selectedPersonController.person.fullName}} 
    (ID: {{App.selectedPersonController.person.id}})</p> 

</script> 

我希望我的第二window.App.Select根據第一個窗口中的選擇動態更新.App.Select。我使用contentBinding =「App.childrenController.active」第二window.App.Select,使這項工作,但它的作用是,如果我選擇了一個人的價值選擇框的選擇框孩子不更新,現在當我選擇選擇框孩子seletbox獲取與根據我以前的人選擇框中選擇的過濾值填充的人不同的人。

人選擇框 - >選擇=李四(Nothing發生)

人選擇框 - >選擇=湯姆·克魯斯(兒童選擇框被根據「李四」選擇過濾)

等。

請看看有什麼不對的地方。

回答

3

我已經把一切都再次聯手,企圖恢復拉雅的死鏈接到一個工作jsbin,實施這個版本的使用ember.js/1.0.0-RC3的鏈接,或依賴,選擇框。

http://jsbin.com/ixogag/5/