Passing property from action to index.hbs template

1

I have this code in my index.hbs file:

<button {{action 'showHotspots'}} class="btn btn-success padding">{{hotspotCategory.name}}</button>

I have the showHotspots method in my routes/index.js file:

showHotspots: function( selection ) {
  this.toggleProperty( 'idFromButton' );
}

The method should toggle this part in my routes/index.js:

{{#if idFromButton}}
  <p>Test1</p>
{{/if}}

However this is not working, when I do it as a component it works but I need the Test1 on a specific place on my page (below all the generated buttons). When I do it in components the Test1 gets displayed between the buttons.

Instead of working with a component I want to do this in my index.js file so I can control the structure of the page.

In short: on my index.hbs i have a if-statement that checks if a variable is true. I want to set this variable from my routes/index.js file (or from somewhere else, doesn’t matter really) using a method that is called in either the same index.hbs file or from a component-1.hbs file.

2

This bites me in the boo boo all the time!

The problem is that idFromButton is defined on your controller, not the route.

You have two options, in your route use this.controller.toggleProperty or move your actions functions into your controller.

First option working here: Ember Twiddle?

Relevant code here snip here:

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    toggleThings() {
      this.controller.toggleProperty('things');
    }
  }
});

I hope this helps!

–Ben

3

Hi Ben,

This was the thing i was looking for, thanks!

Kind regards,

Stijn