javascript - Meteor——将点击处理程序绑定(bind)到条件内的按钮

Question

我有一个 Meteor 模板，其中包含 2 个可能的 HTML block ，具体取决于条件:already_facebook_authed。如下面的代码所示，already_facebook_authed 是 Session 变量的结果，并且该 Session 变量是异步设置的。似乎在渲染模板时，Session 变量(以及 already_facebook_authed)是 falsey，因此当尝试将点击处理程序绑定(bind)到 #deauth_facebook_button 时，它还不存在因为它位于尚未渲染的另一个 block 中。

如何将点击处理程序绑定(bind)到#deauth_facebook_button？也许在呈现某个 DOM 元素时会出现一些回调，我可以在其中实例化此点击处理程序？

<小时/>

------------
-- auth.html

<template name="accounts_auth_with_facebook">
  {{#if already_facebook_authed}}
    <div class="col-md-4">
      <button id="deauth_facebook_button" class="btn btn-primary"> Deauth Facebook </button>
    </div>
  {{else}}
    <div class="col-md-4">
      <div id="facebook_button"> Authenticate with FB </div>
    </div>
  {{/if}}
</template>

----------
-- auth.js

Template.accounts_auth_with_facebook.rendered = function () {

  $('#facebook_button').unbind('click.auth').bind('click.auth', function() {
    // some handler code
  });

  $('#deauth_facebook_button').unbind('click.deauth').bind('click.deauth', function() {
    // some other handler code
  });
};

Template.accounts_auth_with_facebook.already_facebook_authed = function() {
  Meteor.call('get_composer_id', function (error, result) {
    if (blah blah blah) {
      Session.set('logged_in_with_facebook', true);
    }
  });
  return Session.get('logged_in_with_facebook');
};

Answer 1

不要使用 jQuery 在 Meteor 模板上设置点击处理程序，使用 Meteor 标准事件机制:

Template.accounts_auth_with_facebook.events({
  "click #facebook_button":function(event,template){
    // some handler code
  }
  "click #deauth_facebook_button":function(event,template){
    // some other handler code
  }
});