我有一个使用Ember.Router structure的Ember.js应用。
我的应用结构看起来像
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'
这不起作用。当我尝试在this.get('controller')
{{#view App.MySelectView}}
的错误消息
我该怎么做?
答案 0 :(得分:6)
以下是我将如何实现此问题的示例: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();