Search code examples
javascriptjquerybackbone.js

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>

Solution

  • 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>