Backbone render return undefined in the View - backbone.js

Question

I am learning backbone and I seems to be having problem with my render method below. The render is always returning undefined when I run it. Please can anyone help out with this.
var Todo = Backbone.Model.extend({
defaults : {
status: 'true' ,
description : 'Nothing'
},
toggleStatus: function() {
if (this.get('status') === "completed")
this.set({
'status': 'completed'
});
else
this.set({
'status': 'incompleted'
});
}
});
// Simple View
var simpleView = Backbone.View.extend({
events: {
'change input': 'toggleStatus'
},
initialize: function() {
this.model.on('change', this.render, this);
},
toggleStatus: function() {
this.model.toggleStatus();
},
template : _.template('<h3 class="<%= status %>">' +
'<% if(status === "complete") print("checked") %>/>' +
' <%= description %></h3>'),
render: function() {
console.log('render was called');
$(this.el).html(this.template(this.model.toJSON()));
// return this;
}
});
var todonew = new Todo();
var newView = new simpleView({
model: todonew
});

Answer 1

You should probably put brackets in the if statement of your template, that might cause trouble in some browsers. Change this
'<% if(status === "complete") print("checked") %>/>' +
to this
'<% if(status === "complete") {print("checked")} %>/>' +
Then there are at least three different ways to render the content to your page. You need to give the view a DOM element which it can append its content to. Otherwise, it renders it's content into an empty <div> that is floating around in memory. You are using jQuery, which makes it easy to select a DOM element. I am going to use the $('body').html() to replace the entire page html, modify your selector according to what you need.
Option 1: Uncomment return this in your render function, and modify this code at the end
var newView = new simpleView({
model: todonew
});
$('body').html(newView.render().el);
$(this.el).html(this.template(this.model.toJSON()));
to this
$('body').html(this.template(this.model.toJSON()));
Option 2: Send in the element you want to add the content to when you create the view
var newView = new simpleView({
model: todonew,
el: $('body') //or whatever selector you want
});
Option 3: change this line in your render function
$(this.el).html(this.template(this.model.toJSON()));
to this
$('body').html(this.template(this.model.toJSON()));
Again, this replaces the HTML for your whole page, use a different selector, or use .append() or another method instead of .html() depending on your needs.

Answer 2

you need to set your el, this is the problem of your script when return error on this. try this for example:
var newView = new simpleView({
model: todonew,
el: $("#somediv") //put here a div or the element where you want to put your template
});

Answer 3

I have a similar problem when I write:
$('#foo').append(bar.render().el);
I got this error:
Uncaught TypeError: Cannot read property 'el' of undefined
To correct this, I added return this; in my render:function(){}.
render: function() {
// something else
return this; // add this line
}
Reference: Backbone.js Docs
A good convention is to return this at the end of render to enable chained calls.