How to add events to javascript runtime created html widgets

Question

I'm developing a web community in CakePHP and started to have doubts about using jQuery to provide useful widgets around the views when needed.

For example, I've wrote a jQuery plugin which searches the data inside specific input text, asks to my database and get the results handled with events.

Basically the plugin is perfect for simple applications but it's basically useless for a community where I use it almost in all the views and every time handling it with different events and methods, making it with huge event declarations and very annoying to be debugged.

I thougt to solve the problem by using default events from the widget and add the possibility set additional events specific for the view, but how can i do that?

this is the situation i thought

The Green area of the image is where I'm not sure, where I should put the default events to be retrived every time i need them? After known that then, in the view, I could add some event to the widget to be more easy to use.

For widget I intend every kind of html portion is loaded via javascript and is interactive, maybe an input search which retrieves a list of results or something like that.

My question is how can I set default events in runtime to the widget without copy and paste every time? And my second question is, how can I add to them specific events for the view only?

Some tutorial somewhere online would be also nice.

Answer 1

My answer requires backbone.js so I am not sure if this will help you.

You could separate your widget into a wrapper and the real widget. The wrapper could handle events like your close event:

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());
  }

});

The real widget could render itself inside the wrapper widget and both views could interact with the data model (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");
  },
});

This would allow you to separate your events.

You could also do it the other way round and use a wrapper with a sub view.