如何在ember select元素更改时加载视图或模板内容?
我几乎不陌生,这可能很容易,但我已经为这项简单的任务而苦苦挣扎。有什么建议吗?
答案 0 :(得分:2)
答案 1 :(得分:2)
关注@ intuitivepixel的答案,以下是基于选择更改动态加载模板的方法。
//EMBER APP TEMPLATE
App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
model: function(){
return [
{name: 'Kris', template: 'kris'},
{name: 'Luke', template: 'luke'},
{name: 'Alex', template: 'alex'}
];
}
});
App.EmbeddedView = Ember.View.extend({
templateName: Ember.computed.alias('controller.selected'),
templateNameDidChange: function() {
this.rerender();
}.observes('templateName')
});
<script type="text/x-handlebars">
<h4>Load a view on ember select change?</h4>
{{view Ember.Select
contentBinding="this"
optionValuePath="content.template"
optionLabelPath="content.name"
valueBinding="selected"
prompt="Please select a name"
}}
<hr/>
{{view App.EmbeddedView}}
</script>
<script type="text/x-handlebars" id="luke">
THE LUKE TEMPLATE
</script>
<script type="text/x-handlebars" id="alex">
THE ALEX TEMPLATE
</script>
<script type="text/x-handlebars" id="kris">
THE KRIS TEMPLATE
</script>
此示例将根据选择框在luke / alex / chris模板之间切换。
请参阅此jsbin以获取实例:http://jsbin.com/uzekop/1/edit