Sandy Sandy - 1 month ago 12
jQuery Question

replace of undefined in backbone.js

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>

Answer

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>

Comments