Actions inside an EmberJS component

December 17, 2015 | Posted in EmberJS

I have been working on an application with a component that had an action which was not bubbling. After some digging, I found this:

... actions sent from inside a component are sent directly to the component's Ember.Component instance, and do not bubble.

So, this component by itself will neither handle the action nor bubble it through the routers.

<script type="text/x-handlebars" id="components/post-summary">
  <h3 {{action "toggleBody"}}>{{title}}</h3>
  {{#if isShowingBody}}
    <p>{{{body}}}</p>
  {{/if}}
</script>

Adding the following component will solve the issue.

App.PostSummaryComponent = Ember.Component.extend({
  actions: {
    toggleBody: function() {
      this.toggleProperty('isShowingBody');
    }
  }
});

Related Posts

20 Feb 2016 » Streaming radio in a Cordova app

26 Jul 2013 » A simple javascript game