CODEWITHSUNDEEP
javascriptember.jshandlebars.jsaction
tallpaulk
tallpaulk

Reputation: 174

ember.js triggering an action based on conditional

I have an action that I want to trigger in my component hbs file if a conditional returns true. For example, If my component.js file looks like this: 

export default Ember.Component.extend({
  toggleMe: false,
  actions: {
    changeValue() {
      return this.toggleProperty('toggleMe');
    }
  }
});

I want to call that changeValue action in my hbs file. This is the approach that I have tried in my component.hbs file:

{{#if model.property}}
    {{action changeValue}}
{{/if}}

I'm getting an error 

"Assertion Failed: Action passed is null or undefined"

Upvotes: 0

Views: 1136

Answers (3)

Shimu
Shimu

Reputation: 1147

You should not call an action in a template file.
There are computed properties for this.
Here is an example:

import { computed } from '@ember/object';
export default Ember.Component.extend({
  toggleMe: false,
  toggleComputedProperty: computed('toggleMe', function() {^
      return this.toggleProperty('toggleMe');
    }
  }
});

Now you have the toggleComputedProperty availible to use in your template or in your logic.

As a rule of thumb: Never try to do logic/state changing in your template file. Use computed properties or other features for this.

Upvotes: 0

Bala
Bala

Reputation: 161

The error is due to the misspelled syntax during your action call. You must use double quotes for your action name when invoking them.

{#if model.property}}
  {{action "changeValue"}}
{{/if}}

I have also added an twiddle for your reference.

Upvotes: 0

Vignesh Raja
Vignesh Raja

Reputation: 8731

First, you have a misspelled syntax in the component hbs. It should start with {{.

Second, your requirement can be done by using a Ember observer.

Created a live ember twiddle for your understanding.

Modify your component js file as,

import Ember from 'ember';

export default Ember.Component.extend({
  toggleMe: false,
  handleProperty : function()
  {
        this.send("changeValue");
  }.observes('modeldata.property').on('didInsertElement'),
  actions: {
    changeValue() {
      //console.log(this.get("toggleMe"));
      this.toggleProperty('toggleMe');
      //console.log(this.get("toggleMe"));
    }
  }
});

Also you may want to read about Ember computed properties and Ember observers.

Upvotes: 1

Related Questions