Question

我有一个带有2个可能HTML块的Meteor模板，具体取决于条件：already_facebook_authed。如下面的代码所示，already_facebook_authed是Session变量的结果，并且该Session变量是异步设置的。似乎在呈现模板时，Session变量（以及already_facebook_authed）是假的，因此在尝试将单击处理程序绑定到#deauth_facebook_button时，它还不存在，因为它位于另一个块中尚未呈现。

如何将点击处理程序绑定到#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
  }
});

Meteor - 将click处理程序绑定到条件内的按钮

1 个答案: