ember.js - 在控制器动作 EmberJS 中插入组件

Question

好吧，当用户单击按钮时，我需要插入一个组件，我的代码：

破折号.hbs

<button class="btn btn-primary" {{action 'solisXTax'}}> Consul</button>

dash.js //控制器

actions:{ solisXTax(){ "theCode" }, }

我的组件是 ember-chart，

{{ember-chart type="Bar" 
    data=solsGraph 
    width=500 height=350 
    options=opcionesGrafica 
    legend=true}}

谢谢

Answer 1

I don't know if you are familiar with the handlebars conditionals, but you should read more about that in the guides

You can use a conditional like so:

//templates/application.hbs
<button class="btn btn-primary" {{action 'solisXTax'}}> Consul</button>
<hr/>
{{#if componentVisible}}
    {{ember-chart}}
{{else}}
    no component shown
{{/if}}

with the corresponding action in your controller

//controllers/application.js
export default Ember.Controller.extend({
  componentVisible: false,
  actions:{ 
    solisXTax(){ 
      this.toggleProperty('componentVisible')
    }
  }
});

Here is a twiddle that showcases using an if statement to toggle your component.

You could also dynamically toggle between different components, where one could be a empty component, but that might be overkill for your use case.