5

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

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

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

我想通过使用小部件中的默认事件来解决问题，并添加可能为视图设置额外的事件，但我该怎么做呢？

这是我想的情况

在此处输入图像描述

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

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

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

网上某处的一些教程也不错。

4

1 回答 1

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

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

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

于 2013-03-21T16:46:33.567 回答