Php 如何在主干中显示来自模型集合的视图

嗨，伙计们，当我在模型中添加一些东西时，我一直在显示集合中我想要的视图。按下按钮，zview显示新添加的人。下面是我的代码

 $(document).ready(function(){

    var Person = Backbone.Model.extend({
        name: 'default name',
        age: 100,
        initialize: function(){
            this.bind('change', this.render, this);
        }
    });

    var PersonCollection = Backbone.Collection.extend({
        model: Person
      });

    var PersonView = Backbone.View.extend({
        el: $('#personEL'),

        events: 
        {
            "click #login-btn" : "loginClick"
        },
        loginClick: function()
        {
          var name = $('#name').val();
          var age = $('#age').val();
          var newPerson = new Person({name: name, age : age});


          this.personCollection.add(newPerson);          
          var showit = new zview();

        },
        initialize: function(){
         this.personCollection = new PersonCollection();

           this.render(); 
        },

        render: function()
        {
                var template = _.template( $("#personInputTemplate").html(), {} );
        this.el.html(template);
        }
    });



     zview = Backbone.View.extend({
        el: $('#personTable'),

       initialize: function()
       {
        model: Person,
        this.render();   
       }
       ,
       render: function()
       {
           var template = _.template( $('#personDisplayTemplate').html(),this.Person.toJSON() );
           console.log(template);
          this.el.html(template);
       }
    });


var persons = new PersonView();

  });

html代码

 <div id="display">
        <table id="personTable">

        </table>
    </div>


<script type="text/template" id="personInputTemplate">
    <p>Person Name<input type="text" id="name" /></p>
    <p>Person Age<input type="text" id="age" /></p>
    <p><button id="login-btn">Save</button></p>
</script>

<script type="text/template" id="personDisplayTemplate">
            <tr>
                 <td><span><%= name ? name : '' %></span></td>
                 <td><span><%= age ? age : '' %></span></td>

            </tr>
</script>


<div id ="personEL"></div>
<div id="showPerson"></div>

人名

人龄

拯救

---

任何关于语法和解释的帮助都是值得的。谢谢

除了查看基纳库塔的评论外，我还建议查看以下内容：

首先，您应该从zview中删除以下代码，因为它是无效的javascript

model: Person,

然后，当您创建zview视图的实例时，可以将模型作为参数传递，以便替换

var showit = new zview();

与：

然后，在渲染zview时，可以直接引用模型

尝试替换：

var template = _.template( $('#personDisplayTemplate').html(),this.Person.toJSON() );

与

这至少可以让您开始正确的工作。

我注意到两件事（抱歉，没有时间进一步分析）：第一，您正在将模型的更改事件绑定到模型的渲染函数？默认情况下，模型没有渲染-这是视图的用途。第二：在zview的render函数中，引用这个.Person.toJSON（）-Person是视图的模型，而不是视图上的变量。您可以说是this.model.toJSON。

var template = _.template( $('#personDisplayTemplate').html(),this.Person.toJSON() );

var template = _.template($('#personDisplayTemplate').html(), this.model.toJSON());