EmberJS:如何在选择更改时呈现模板

时间:2013-09-06 00:24:58

标签: javascript jquery ember.js handlebars.js

我是ember的新手,我正试图弄清楚当select控件发生变化时如何渲染模板。

CODE:

    App.LocationTypeController = Ember.ArrayController.extend({

    selectedLocationType: null,

    locationTypeChanged: function() {
        //Render template
    }.observes('selectedLocationType')
});

{{view Ember.Select 
  contentBinding="model"
  selectionBinding="selectedLocationType"
  optionValuePath="content.id"
  optionLabelPath="content.name"}}

当locationType更改时,控制器中会触发locationTypeChanged函数。 但是如何从那里将一些内容渲染到dom中呢? (this.render()?)...

2 个答案:

答案 0 :(得分:7)

是的,您必须仅使用this.render(),但此处的关键是into选项。

App.LocationTypeController = Ember.ArrayController.extend({

 selectedLocationType: null,

 locationTypeChanged: function() {
    var selectedLocationType = this.get('selectedLocationType');
    this.send('changeTemplate',selectedLocationType);
 }.observes('selectedLocationType')
});

将路线中的操作视为

changeTemplate: function(selection) {
          this.render('template'+selection.id,{into:'locationType'});
 }

并在{{outlet}}的模板中添加locationType

{{view Ember.Select 
       contentBinding="model"
       selectionBinding="selectedLocationType"
       optionValuePath="content.id"
       optionLabelPath="content.name"}} 

{{outlet}}

根据您的要求提供JSBin

答案 1 :(得分:4)

如果您只需要展示一个框架,当存在选定内容时,您可以使用if把手帮手:

在您的模板中

...

{{#if selectedLocationType}}
  Any content here will be visible when selectedLocationType has some value
{{/if}}

...

{{view Ember.Select 
  contentBinding="model"
  selectionBinding="selectedLocationType"
  optionValuePath="content.id"
  optionLabelPath="content.name"}}

我希望它有所帮助