Trigger header button event in Meteor / Iron / Ionic

Question

I'm using Meteoric (Meteor + Ionic) coupled with Iron. My problem is pretty simple and I can't find any solution.

I've this template (Ionic + Meteoric)

<!-- Header : Title -->
{{#contentFor "headerTitle"}}

  <h1 class="title">Geokaliz</h1>

{{/contentFor}}

<!-- Header : Button Right -->
{{#contentFor "headerButtonRight"}}

  {{#if isFocusedOnMarker}}
    <button class="button button-icon ion-ios-navigate" id="revoke-focus"></button>
  {{else}}
    <button class="button button-icon ion-ios-navigate-outline" id="become-focus"></button>
  {{/if}}

{{/contentFor}}

I want to focus on my #become-focus button which appears on my page. It's on the top of the page on the header generated by Ionic.

Here is my code in Meteor / Iron

Template.Home.events {

  "click #become-focus": (event) ->

    console.log('focused')
    Session.set('isFocusedOnMarker', true)

  "click #revoke-focus": (event) ->

    console.log('not-focused')
    Session.set('isFocusedOnMarker', false)

When I click on my #become-focus button, nothing happens but if I move it somewhere else, let's say on my footer, the console.log is triggered which means it works.

My guess is Ionic doesn't accept buttons on the headed, but i would find this pretty stupid. Another thought was the header isn't considered being in the template itself for some reason, but as a beginner I'm not sure at all nor know how to fix this. Anyone with a similar structure than me has an idea ?

EDIT If this can help, here's the full template to spot any code which could generate this issue ...

<template name="Home">

  <div class="home">

    <!-- Header : Title -->
    {{#contentFor "headerTitle"}}

      <h1 class="title">Geokaliz</h1>

    {{/contentFor}}

    <!-- Header : Button Right -->
    {{#contentFor "headerButtonRight"}}

      {{#if isFocusedOnMarker}}
        <button class="button button-icon ion-ios-navigate" id="revoke-focus"></button>
      {{else}}
        <button class="button button-clear" id="become-focus">
          {{> ionIcon icon="ios-navigate-outline"}}
        </button>
      {{/if}}

    {{/contentFor}}

    <!-- Map in the middle -->
    {{#ionContent class="has-header has-footer"}}

      {{>GeolocationMap}}

    {{/ionContent}}

    <!-- Footer : Target Setup -->
    {{#if myTarget.isActivated}}

      <!-- Revoke target button -->
      <div class="bar bar-balanced bar-footer">
        <div class="title title-center">
          <button class="button button-icon ion-checkmark-circled mini-margin" id="revoke-target"> You are a target</button>
        </div>
      </div>

    {{else}}

      <!-- Become target button -->
      <div class="bar bar-dark bar-footer">
        <div class="title title-center">
          <button class="button button-icon ion-close-circled mini-margin" id="become-target"> You are not a target</button>
        </div>
      </div>

    {{/if}}

  </div>

</template>

Answer 1

Anything inside of {{#contentFor "headerButtonRight"}} will be pulled out of your template and injected into the layout, so you'll need to attach events on the layout template. In your case, maybe you could try to replace Template.Home.events to Template.layout.events.

Hope it works for you.