Question

我正在使用Meteoric（流星+离子）和铁。我的问题非常简单，我找不到任何解决方案。

我有这个模板（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}}

我想专注于我页面上显示的#become-focus按钮。它位于Ionic生成的标题页面的顶部。

这是我在 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)

当我点击我的#become-focus按钮时，没有任何反应，但如果我将其移动到其他地方，让我们在我的页脚上说，console.log被触发，这意味着它可以正常工作。

我的猜测是Ionic不接受头上的按钮，但我觉得这很愚蠢。另一个想法是由于某种原因标题不被认为是在模板本身，但作为一个初学者我根本不确定也不知道如何解决这个问题。 任何结构与我相似的人都有想法吗？

修改 如果这可以提供帮助，这里有完整的模板来发现任何可能产生此问题的代码......

<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

{{#contentFor＆＃34; headerButtonRight＆＃34;}}内的任何内容都会从模板中拉出并注入到布局中，因此您需要在布局模板上附加事件。在您的情况下，也许您可以尝试将Template.Home.events替换为Template.layout.events。

希望它适合你。

Meteor / Iron / Ionic中的触发标题按钮事件

1 个答案: