How to handle events of objects outside a view in backbone.js?

Question

As in the example with the base Todolism, I have a set of elements. I made 2 views, one for the list and one for each item. It works great.

However, since I need the elements of the list to be changed, in the element view I process the change event , opening a popup with the colorbox plugin that contains the html form. Html is dynamically created and passed to the colorbox element.

I use additional colorbox and backbone-form plugins.

Now: the pop-up is NOT THE CHILD (in the DOM) of my view, so I don’t know how to fire the event when the send button is active.

Here is the code snippet (omitted unused parts):

// ** view of the single collection element window.listElement = Backbone.View.extend({ tagName: 'li', [...] updateElement:function(){ //creates the update form in a popup menu var form=new Backbone.Form({BLA BLA BLA...I TESTED IT, IT WORKS. }).render(); $(form.el).append('<input id="update-btn" type="button" name="updateBtn" value="Update" style="display: block;">'); self=this; //HERE COME THE TROUBLES $.colorbox({ html:form.el, [...] /SOME OTHER PARAMS }).delegate('#update-btn','click',self.saveEl()); }, saveEl:function(){ console.log("now saving..")}, }, 

What happens when the saveEl method (or function ?, which term is more correct?) Is launched when a popup window opens.

I also tried with a different version of the code:

  initialize: function(){//added this in the initialize function _.bindAll(this, "saveEl"); $('#update-btn').bind('click', this.saveEl()); }, updateElement:function(){ //LIKE BEFORE BUT WITHOUT DELEGATE FUNCTION $.colorbox({ html:form.el, [...] /SOME OTHER PARAMS }); }, saveEl:function(){ console.log("now saving..")}, }, 

In this second case, the saveEl function is called when the view is created (thus, one time for each list item).

I know that I colud makes a presentation for a popup, but something tells me that it is too complicated and that I need a simpler architecture.

The question, indeed, is more general: is it possible to process events triggered by the DOM object outside the scope of $ (this.el) without creating a view for them ?

early.

----------------- UPDATE: --------------

The final version of the working code is as follows:

 // ** view of the single collection element window.listElement = Backbone.View.extend({ tagName: 'li', [...] updateElement:function(){ //creates the update form in a popup menu var form=new Backbone.Form({BLA BLA BLA...I TESTED IT, IT WORKS. }).render(); $(form.el).append('<input id="update-btn" type="button" name="updateBtn" value="Update" style="display: block;">'); $(form.el).delegate('#update-btn','click',this.saveEl()) $.colorbox({ html:form.el, [...] /SOME OTHER PARAMS }); }, saveEl:function(){ console.log("now saving..")}, } }); 

Answer 1

EDIT:

$. colorbox does not send back the correct html to link it.

As you can see, you are providing colorbox form.el , so you can directly bind form.el :

 $(form.el).on('click', '#update-btn', self.saveEl); // here your colorbox code $.colorbox({ html: form.el, // [...] SOME OTHER PARAMS }); 

Now you should use on because delegate is an old method: http://api.jquery.com/on/

----------------------

Yes, you can handle events triggered by a DOM object outside the viewport, you just need to use $('#your-element') instead of this.$('#your-element') .

It is normal for your code to run saveEl directly, because you give the delegate result of this function, you need to point to the function as follows:

 $.colorbox({ html: form.el, // [...] SOME OTHER PARAMS }).delegate('#update-btn', 'click', self.saveEl); // without ()