Ember.Select contentBinding在使用路由器的應用程序

Question

我有一個Ember.js應用程序使用Ember.Router structure。

我的應用程序結構看起來像

window.App = Ember.Application.create { 
    #Truncated idea of app, not including application controller or any of that 
    MainController = Ember.Controller.extend() 
    MainView = Ember.View.extend 
     templateName: 'main-template' 

所以控制器和視圖是擴展而不是對應用程序的創建創建。有那麼連接插座

Router: Ember.Router.extend 
    root: Ember.Route.extend 
     main: Ember.Route.extned 
      route: '/' 
      connectOutlets: (router, event) -> 
       router.get('applicationController').connectOutlet('main') 

我需要一個<select>標籤綁定到一組值的途徑。 Ember.Select看起來像一個好辦法做到這一點，所以我添加控制器和視圖擴展的選擇

MySelectController: Ember.ArrayController.extend 
    contents: [{id:1,title:'test'},{id:2,title:'test2'}] 
MySelectView: Ember.Select.extend 
    contentBinding: this.get('controller') 
    contentValuePath: 'id' 
    contentLabelPath: 'title' 

這是行不通的。當我嘗試在視圖中包含{{#view App.MySelectView}}

時，我收到有關this.get('controller')的錯誤，該怎麼辦？

Answer 1

這裏是我將如何實現這樣一個例子：the jsfiddle

把手模板：

<script type="text/x-handlebars" data-template-name="application"> 
    <header> 
    <h1>Ember Router Sample</h1> 
    </header> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="myForm"> 
    {{view view.mySelectView 
    selectionBinding="controller.selected" 
    contentBinding="view.controller.content.persons" 
    }} 
    {{view Ember.TextField valueBinding="controller.selected.name"}} 
</script> 

的javascript：

App = Ember.Application.create(); 

App.ApplicationController = Em.Controller.extend(); 
App.ApplicationView = Em.View.extend({ 
    templateName: 'application' 
}); 

App.MySelectController = Em.ArrayController.extend(); 

App.MyFormController = Em.Controller.extend({ 
    selected: null, 
}); 

App.MyFormView = Ember.View.extend({ 
    templateName: 'myForm', 
    mySelectView: Em.Select.extend({ 
    optionLabelPath: 'content.name', 
    optionValuePath: 'content.id' 
    }) 
}); 

App.Router = Em.Router.extend({ 

    root: Em.Route.extend({ 

    index: Em.Route.extend({ 
     route: '/', 
     connectOutlets: function(router, context) { 
     router.get('applicationController').connectOutlet({ 
      name: 'myForm', 
      context: Ember.Object.create({ 
       persons: [{id:0, name: "Wayne"}, {id: 1, name: "Gart"}] 
      }) 
     }); 
     } 
    }) 
    }) 
}); 
App.initialize();