Backbone Subview Event Doesn't Fire, Access To This.model Lost
I'm using a master view with a subview with it's own subview, and I am losing the event on the sub-sub view. Looking in SO, it looks like a delegateEvents is needed, but I can't f
Solution 1:
let me list out the assumptions I made based on the question:
- The template rendering has no issues.
- The template code may be substituted with plain html to check the event firing.
Based on those assumption, I created a collection with two models and passed them over to TodosView from which I iterated over those models to generate row view- there by adding it to 'tbody' tag.
Please follow the fiddle here => https://jsfiddle.net/randomfifaguy/304kffed/1/
console.log("hello");
Test = Backbone.Model.extend({});
var testModel1 = newTest({
'task': 'taskA',
'due': 'dueByZ'
})
var testModel2 = newTest({
'task': 'taskB',
'due': 'dueByY'
})
console.log(testModel1.get('task'));
console.log(testModel2.get('task'));
ModelCollection = Backbone.Collection.extend({});
var models = newModelCollection([testModel1, testModel2]);
console.log(models);
TodosView = Backbone.View.extend({
el: "#content-body",
initialize: function() {
this.render();
},
render: function() {
var templ = "<div class='table-responsive'><table id='todo-table'class='table'><span class='caption'>Top Tasks <a id='<%= project %>' class='projectName'>(See All)</span></a><thead><tr><th>Task</th><th>Due</th></tr></thead><tbody></tbody></table></div>";
$(this.el).html(templ);
_.each(this.collection.models, function(mdl){
var view = newTodoView({
model: mdl
});
$('tbody').append(view.el);
});
}
});
MainView = Backbone.View.extend({
el: "#content",
initialize: function() {
this.render();
},
render: function() {
newTodosView({
collection: models
});
}
});
TodoView = Backbone.View.extend({
tagName: "tr",
className: "todo-rec",
events: {
"click .edit": "editFields"
},
initialize: function() {
this.render();
this.updateContent();
},
render: function() {
var html = "<td><label id='task'class='edit tasklabel'></label><input id='edited-task'class='new-edit taskinput'style='display:none;' value=''></td><td><span id='due' class='edit duelabel'></span><input id='edited-due' class='new-edit dueinput' style='display:none;'value=''></td>"this.$el.html(html);
returnthis;
},
editFields: function() {
console.log("todoView: editFields clicked");
},
updateContent: function() {
this.$el.find('.tasklabel').text(this.model.get('task'))
this.$el.find('.taskinput').val(this.model.get('task'))
this.$el.find('.duelabel').text(this.model.get('due'))
this.$el.find('.dueinput').val(this.model.get('due'))
}
});
var mainViewObj = newMainView();<body><divid='content'>
Here is a sample div
<divid="content-body">
content to be changed
</div></div></body>However I'd like to know your html of the outermost view to help you better. Please compare it with the output html of the fiddle and let me know. Hope that answers your question.
Answering your comment in detail You might want to change this piece of code
//You might want to change this piece of code var tbodyEl = $("<tbody />");
this.collection.each(function (item) {
var todoView = newTodoView({
model: item
});
tbodyEl.append(todoView.el);
});
this.$el.append(this.template({
project: projectName,
tbody: tbodyEl["0"].outerHTML
}));Your tbodyEl basically points to nothing until you render try doing this before you append to tbody
this.$el.append(this.template({
project: projectName,
tbody: tbodyEl["0"].outerHTML
}));
// followed bythis.collection.each(function (item) {
var todoView = newTodoView({
model: item
});
tbodyEl.append(todoView.el);
});
Post a Comment for "Backbone Subview Event Doesn't Fire, Access To This.model Lost"