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

Question

hi guys i am stuck in displaying the view from the collection what i want when ever i add some thing into the model on button press the zview displays the newly added person. below is my code.

 $(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 code

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

any help with syntax and explanation is apprecciated. thanks

Answer 1

In addition to looking at kinakuta's comment I'd suggest looking at the following:

First of all, you ought to remove the following code from zview as it is invalid javascript.

model: Person,

Then, when you create an instance of your zview view you can pass a model as an argument, so you could replace

var showit = new zview();

with:

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

Then when rendering your zview you can refer directly to the model.

Try replacing:

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

with

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

That should at least get you started on the right track.