Ember通过HBS模板以编程方式调用控制器操作

Question

I have a defined action on my controller that makes a modal visible. In my hbs template, I am able to create a button and assign it the action. When I do this, I can make the modal appear by clicking the button.

I am trying to show the modal (call the controller action) without having to click anything. Is this possible? I want the modal to pop up based on a conditional on the model automatically.

Answer 1

Theres a pretty straightforward way to do this, just create a computed alias of the model property that you want

// controller
export default Ember.Controller.extend({
  showModal: Ember.computed.alias('model.showModal')
});

// template
{{#if showModal}}
  <p>Showing modal</p>
{{/if}}

that's it

working example: https://ember-twiddle.com/3e86c841e9d7ea54d4febd74b5463fb8?openFiles=controllers.application.js%2C

Answer 2

You could create a component, add the button to the component and then pass the model and action into the component.

Then in the component's init lifecycle hook, do your model conditional check and call the passed in action if it's true .

// some-template.hbs
{{component-with-button
    model=model
    openModal=(action 'openModal')
}}

// components/component-with-button.js
Component.extend({
    init() {
        this._super(...arguments);
        if (this.get('model.conditionalCheck')) {
            this.get('openModal')();
        }
    }
});

From my knowledge, there's no lifecycle hook in a controller which fires every time you visit a specific page. Adding your check to a component guarantees your check will fire each time you visit the page as it will always render the button component.