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

EmberJS: How to render a template on select change

本文关键字：选择 EmberJS      更新时间：2023-09-26

我是 ember 的新手，正在尝试弄清楚在选择控件更改时如何呈现模板。

法典：

    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"}}
当位置类型更改

时，将在控制器中触发位置类型更改函数。但是如何从那里将一些内容渲染到 dom 中呢？（this.render（）？）...

是的，您只需要使用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'});
 }

并在locationType的模板中有一个{{outlet}}。 

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

满足您要求的示例 JSBin

如果您只需要显示一个框架，当存在选定的内容时，您可以使用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"}}

我希望它有所帮助

相关文章：