加载一个关于余烬选择更改的视图?

时间:2013-07-09 13:42:01

标签: ember.js

如何在ember select元素更改时加载视图或模板内容?

我几乎不陌生,这可能很容易,但我已经为这项简单的任务而苦苦挣扎。有什么建议吗?

2 个答案:

答案 0 :(得分:2)

虽然您应该发布一些已尝试过的代码,this example可能会帮助您开始使用,以便改进您的问题。

有关如何根据选择框的选定值更改按钮标签的示例,请参阅here

希望它有所帮助。

答案 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