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

Question

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

例如,我编写了一个jQuery插件,用于搜索特定输入文本中的数据,询问我的数据库并获取使用事件处理的结果.

基本上这个插件对于简单的应用程序来说是完美的,但它对于我几乎在所有视图中使用它的社区基本无用,并且每次使用不同的事件和方法处理它,使其具有巨大的事件声明并且非常烦人地被调试.

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

这是我想的情况

图像的绿色区域是我不确定的地方,我应该在每次需要时将默认事件放回原处？知道之后,在视图中,我可以向窗口小部件添加一些事件,以便更容易使用.

对于小部件,我打算通过javascript加载每种类型的html部分并且是交互式的,也许是输入搜索,它检索结果列表或类似的东西.

我的问题是如何在运行时将默认事件设置为窗口小部件,而不是每次都进行复制和粘贴？我的第二个问题是,如何才能为视图添加特定事件？

某些在线教程也很好.

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");
  },
});

这将允许您分离您的事件。

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