替换 backbone.js 中的未定义

Question

我只想将模型数据绑定到 DOM。但到目前为止，我得到了未定义的替换错误。出了点问题。

这是我的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>

我的 bodo 标签中有一个这样的模板

<script type="text/template" id="container_template">

        </script>

Answer 1

使用模板

<!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/template" id="container_template">
<li><%=name%></li>
<li><%=age%></li>
<li><%=job%></li> 

        </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 template = _.template($('#container_template').html());
            var hi= template(this.model.toJSON());
            this.$el.html(hi);
            return this;
        }
    });

    var person_view = new PersonView({model:person1});
$("body").html(person_view.el);

</script>

</body>
</html>

Answer 2

没有模板

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

替换 backbone.js 中的未定义

replace of undefined in backbone.js

javascript

jquery

backbone.js