So here is the thing. I'm making an app that uses backboneJS. I currently create a list of different rows. Each row has an edit button with the function editRow and a delete button with the function removeRow. Currently editRow works and it creates the new view which in this case is a modalWindow and its app.EditRowView. This view has another button that I simply cannot bind to. The function that does not get bound is modalWindow.
Any clues? Is my logic wrong? Should views not create other views?
Any help is much appreciated as usual.
app.FormRowView = Backbone.View.extend({
tagName:'li',
events: {
"click .danger" : "removeRow",
"click .primary" : "editRow"
},
initialize:function(){
var template =this.model.get('temp');
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.template = _.template($("#"+template).html());
},
render:function(){
var renderedContent = this.template(this.model.toJSON());
$(this.el).html(renderedContent);
$(function() {
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
});
return this;
},
removeRow:function(){
$(this.el).remove();
},
editRow:function(){
var view = new app.EditRowView({
model:this.model,
collection: this.collection
});
$("body").append(view.render().el);
return this;
}
});
app.EditRowView = Backbone.View.extend({
events: {
"click .save" : "modalWindow"
},
initialize:function(){
var template =this.model.get('editScreenTemplate');
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.template = _.template($("#"+template).html());
},
render:function(){
var renderedContent = this.template(this.model.toJSON());
$(this.el).html(renderedContent);
return this;
},
modalWindow:function(){
alert("im in");
}
});
Basically what is happening is that the function modalWindow never fires. I have the right element (a button with class .save) in the UI
