如何将事件添加到 javascript 运行时创建的 html 小部件

Question

我正在 CakePHP 中开发一个网络社区，并开始怀疑使用 jQuery 在需要时围绕视图提供有用的小部件。

例如，我编写了一个 jQuery 插件，它在特定输入文本中搜索数据，询问我的数据库并使用事件处理结果。

基本上，该插件非常适合简单的应用程序，但对于我几乎在所有视图中都使用它并且每次都使用不同的事件和方法处理它的社区来说它基本上是无用的，这使得它具有大量的事件声明并且非常烦人调试.

我想通过使用小部件中的默认事件来解决问题，并添加设置附加事件特定于视图的可能性，但是我该怎么做？

这是我想的情况

图像的绿色区域是我不确定的地方，我应该在哪里放置默认事件以在每次需要时检索它们？在知道之后，在视图中，我可以向小部件添加一些事件以更易于使用。

对于小部件，我希望每种 html 部分都通过 javascript 加载并且是交互式的，可能是检索结果列表或类似内容的输入搜索。

我的问题是如何在运行时将默认事件设置为小部件，而无需每次都复制和粘贴？ 我的第二个问题是，如何仅为视图添加特定事件？

网上的一些教程也不错。

Answer 1

我的回答需要backbone.js，所以我不确定这是否对你有帮助。

您可以将小部件分为包装器和真正的小部件。 包装器可以处理诸如关闭事件之类的事件：

var WidgetWrapper = Backbone.View.extend({

  tagName:  'div',
  // This should be a mustache template:
  template: '<a class="close" href="#">close</a><div class="content"></div>',
  events: {
    '.close click':   'close',
    '.open click' :   'open'
  },
  close: {
     this.$el.hide();
  },
  open: {
     alert('I am open');
  }
  render: {
    this.$el.html(Mustache.to_html(view.template, view.model.toJSON());
  }

});

真正的小部件可以在包装小部件中呈现自己，并且两个视图都可以与数据模型交互 (this.model)。

var SpecialWidget = Backbone.View.extend({

  tagName:  'div',

  // This should also be a mustache template:
  template: '<input> <a href="#" clas="open">open</a>',

  events: {
    'input change':   'edit'
  },

  render: function() {
    if(!this.wrapper) {
      this.wrapper = new WidgetWrapper();
    }

    // Hand over the model to the wrapper
    this.wrapper = this.model;
    // Render the wrapper
    this.wrapper.render();

    // Insert the widget content inside the wrapper
    this.$el.empty().append(this.wrapper.$el);
    this.$(".content").html(Mustache.to_html(view.template, view.model.toJSON());
  },

  edit: function() {
    alert("Changed");
  },
});

这可以让你分开你的事件。

您也可以反过来使用带有子视图的包装器。