I just want to bind the model data to the DOM. But so far I got error of replace of undefined. Something is wrong.
This is my script.js
<script type="text/javascript">
var Person = Backbone.Model.extend({
defaults:{
name:"",
age:20,
job:'jobless'
}
});
var person1 = new Person({
name:"Sony",
age: 30,
job: "Teacher"
});
var PersonView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
tagName:'li';
var html_content = this.model.get('name') + ', ' + this.model.get('age') +
' (' + this.model.get('job') + ')';
var template = _.template($('#container_template').html(this),{})
this.$el.html(template);
}
});
var person_view = new PersonView({model:person1});
</script>
and I have a template like this in my bodo tag
<script type="text/template" id="container_template">
</script>
without template
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script type="text/javascript">
var Person = Backbone.Model.extend({
defaults:{
name:"",
age:20,
job:'jobless'
}
});
var person1 = new Person({
name:"Sony",
age: 30,
job: "Teacher"
});
var PersonView = Backbone.View.extend({
tagName:'ul',
initialize: function(){
this.render();
},
render: function(){
var entry = document.createElement('li');
firstname=this.model.get('name');
entry.appendChild(document.createTextNode(firstname));
this.$el.html(entry);
return this;
}
});
var person_view = new PersonView({model:person1});
$("body").html(person_view.el);
</script>
</body>
</html>