backbone jquery-ui dialog buttons external function - jquery-ui

Question

For a jquery-ui dialog inside a render function, can I have buttons that point to another function and not inline it?
var MyView = Backbone.View.extend({
submit: function(event) { /* foo */ },
buttons: [{
'text' : 'SUBMIT',
'click' : this.submit // <== like this
}],
render: function() {
this.$el.append("I'm a dialog with a button").dialog({ buttons: this.buttons });
return this;
}
});
I ran the above code as is, and it seems like the engine can't find submit:
Uncaught TypeError: Cannot call method 'apply' of undefined jquery-ui.js:10018
$.widget._createButtons.$.each.props.click jquery-ui.js:10018
jQuery.event.dispatch jquery-1.9.1.js:3074
jQuery.event.add.elemData.handle jquery-1.9.1.js:2750

Answer 1

The buttons array is interpreted when you declare your view and at that point this is set to the root object (probably window). You can demonstrate this behavior by assigning something to window.submit. For example,
window.submit = function() {
console.log('window submit');
}
is triggered when you click on your button. See http://jsfiddle.net/nikoshr/AmRkp/ for a demo.
A solution to your problem would be to use your definition as a template to build a custom array of buttons for each instance. Something like this :
var MyView = Backbone.View.extend({
submit: function(event) {
console.log(this, 'submit');
},
buttons: [{
'text' : 'SUBMIT',
'click' : 'submit'
}],
render: function() {
var mybuttons;
//extract the buttons from an array or function,
mybuttons = _.result(this, 'buttons');
//build the array
mybuttons = _.map(mybuttons, function(obj) {
// for each object describing a button
//create a clone to avoid problems
obj = _.clone(obj);
//set the callback, bound to the view
obj.click = _.bind(this[obj.click], this);
return obj;
}, this);
this.$el.append("I'm a dialog with a button").dialog({
buttons: mybuttons
});
return this;
}
});
See http://jsfiddle.net/nikoshr/AmRkp/3/ to play with