I have a backbone view class, whose render() method calls a showCal() method (via a plug-in for example fullcalendar).
the showCal() method has an options hash, internally having several functions. For example
showCal: function() {
...
$('#somediv').fullCalendar({
});
Inside the above code, there is another callback function, "eventDrop", which shows qtip.
...
fullCalendar({
eventDrop: function() {
$(someElement).qtip({
));
}
});
And the qtip itself has a many html UI elements with event handler functions. So the full hierarchy of nested scopes looks somewhat like this...
var MyView = Backbone.View.extend({
...
render: function() {
this.showCal();
},
...
showCal: function() {
...
$(element).fullCalendar({
...
eventDrop: function() {
$(someElement).qtip({
...
events: {
render: function() {
$(button).on('click', function(e) {
... code to handle the event.
});
}
}
});
},
...
});
}
});
In the above example (with its deep level of nested function scopes), I am writing a event handler for button click. In this event handler, I have to access the backbone view this object, and from that this object, access the collection object and do a save on a model belonging to this collection.
A couple of direct approaches would be: i) Store the model object into the qtip element as a "data" attribute, and directly make an ajax call inside this nested fn. But this would violate the MVC principle, and leads a hackish code. ii) raise a custom event in this nested fn, and handle it at the view level directly, where the this would become available.
Are there any other [better] approaches to such situation?
