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

Question

大家好，当我在模型中添加一些东西时，按下按钮，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>

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

Answer 1

除了查看 kinakuta 的评论之外，我建议查看以下内容：

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

model: Person,

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

var showit = new zview();

为：

var showit = new zview({model: newPerson});

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

尝试替换：

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

与

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

这至少应该让你开始走上正确的轨道。