vee vee - 2 months ago 17
Javascript Question

Ember action or this.get work only once

I have this index controller.

import Ember from 'ember';

export default Ember.Controller.extend({
actions: {
reload() {
console.log('click on button reload');
this.get('doReload');
}
},
doReload: Ember.computed(function() {
console.log('do reload method');
// ajax action will be here.
}),
});


And this is button in the template.

<button type="button" class="btn btn-secondary btn-sm" {{action 'reload'}}>Reload</button>


When I click on the button for the first time,
console.log()
contain 2 line of messages correctly.


click on button reload

do reload method


But when I click on the button for second time or more,
console.log()
contain contain only one line. It doesn't call
doReload
again.


click on button reload


How to make this.get work every time I click on the action button?

Answer

computed properties are cached until dependent properties are changed. If you want to just execute a function not inside the action just create and call a function.

export default Ember.Controller.extend({
    actions: {
        reload() {
            console.log('click on button reload');
            this.doReload();
        }
    },
    doReload: function() {
        console.log('do reload method');
        // ajax action will be here.
    },
});