我想创建一个我可以在 dom 元素上重用的通用事件处理程序，这样我就不必一遍又一遍地编写样板。我以为我已经弄明白了，但我遇到了错误。

我遇到的问题是我认为事件处理程序的绑定(bind)时间与我需要的时间不同。也许在 document.ready？我认为我需要用 .live() 方法附加它们的地方？虽然我可能不知道我在说什么。

这是我正在尝试做的事情:

多页应用。

需要插入数据的多个集合。

显示插入表单的按钮代码。

<button id="btnShowInsert" class="btn btn-success" rel="tooltip" title="add group">
    <i id="btnIcon" class="icon-plus-sign icon-white"></i>
</button>

显示基于页面( Controller )的表单的模板

{{> groups_insert}}

这是表格。

<template name="groups_insert">
    {{#if acl_check}}
    {{> alert}}
    < p>
      < form class="form-horizontal well hide" id="insert">
        <fieldset>
          < div class="control-group">
            < label class="control-label" for="name">Name</label>
            < div class="controls">
              < input type="text" class="input-xlarge" id="name" name="name">
            < /div>
          < /div>
          < div class="form-actions well">
            < button id="btnReset" type="reset" class="btn btn-large">Reset</button>
            < button id="btnSubmit" type="button" class="btn btn-primary btn-large">Submit</button>
          < /div>
        < /fieldset>
      < /form>
    < /p>
  {{/if}}
< /template>

这是实现在页面上显示表单的按钮的客户端代码。

Template.groups.events[ Meteor.eventhandler.btn_events('#btnShowInsert') ] =  Meteor.eventhandler.make_btn_show_insert_form_click_handler();

这是我的通用事件处理程序:

var EventHandler = Base.extend({
  btn_events: function(selector) {
    return 'click ' + selector; //, keydown '+selector+', focusout '+selector;
  },

  make_btn_show_insert_form_click_handler: function(){
    //var click = options.click || function () {};
    return function (event) {
      if (event.type === "click") {
        event.stopPropagation();
        event.preventDefault;
        try{
          if ($('#btnIcon').hasClass('icon-plus-sign') ) {
            $('#btnIcon').removeClass('icon-plus-sign');
            $('#btnIcon').addClass('icon-minus-sign');
          } else {
            $('#btnIcon').removeClass('icon-minus-sign');
            $('#btnIcon').addClass('icon-plus-sign');
          }

          $('#insert').slideToggle('slow', 'swing');

        } catch(error) {
          Alert.setAlert('Error', 'Critical Error: ' + error, 'alert-error');
        }
      }
    }
  },

});

Meteor.eventhandler = new EventHandler;

错误

Uncaught TypeError: Cannot call method 'btn_events' of undefined

但是，如果我以这种方式定义事件处理程序并以这种方式调用它，它就可以工作。

Template.groups.events[ btn_events('#btnShowInsert') ] =  make_btn_show_insert_form_click_handler();

var btn_events = function (selector) {
  return 'click ' + selector; //, keydown '+selector+', focusout '+selector;
};


var make_btn_show_insert_form_click_handler = 
function () {
  //var click = options.click || function () {};
  console.log( Meteor.request.controller );

  return function (event) {
    if (event.type === "click") {
      event.stopPropagation();
      event.preventDefault;
      try{
        if ($('#btnIcon').hasClass('icon-plus-sign') ) {
          $('#btnIcon').removeClass('icon-plus-sign');
          $('#btnIcon').addClass('icon-minus-sign');
        } else {
          $('#btnIcon').removeClass('icon-minus-sign');
          $('#btnIcon').addClass('icon-plus-sign');
        }

        $('#insert').slideToggle('slow', 'swing');

      } catch(error) {
        Alert.setAlert('Error', 'Critical Error: ' + error, 'alert-error');
      }
    }
  }
};

问题
我不想为了实现一个可以在任何页面上 slideToggle 和表单的漂亮按钮而在我的整个站点上复制代码。如果我能将它抽象化，那么我应该能够在所有页面上为我呈现的允许数据输入的任何集合设置一个显示表单类型的按钮。同样，这也导致能够为所有表单创建一个表单处理程序，然后通过对模型的操作将它们绑定(bind)到 Controller 。

有什么想法吗？

最佳答案

您可以将高级模板绑定(bind)到使用子模板创建的元素。然后你只需要做一次绑定(bind)。例如

HTML:

<template name="settings">
    {{> login_settings }}
    {{> account_settings }}
    {{> data_settings }}
</template>

<template name="login_settings">
  <btn class="slideToggle">Slide me for login!</btn>
</template>

<template name="account_settings">
  <btn class="slideToggle">Slide me for account!</btn>
</template>

<template name="data_settings">
  <btn class="slideToggle">Slide me for data!</btn>
</template>

JavaScript:

Template.settings.events {
  'click .slideToggle': function() {
    var clickedElement = event.target;
    // add/remove CSS classes to clicked element
  }
};

因此，如果您最终在设置下创建了 10 个不同的模板定义，那么您仍然只需将处理程序绑定(bind)到一个模板。

关于javascript - 在 Meteor 中如何创建通用事件处理程序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11775380/