백본에서 모델 컬렉션의 뷰를 표시하는 방법

Question

안녕하세요 여러분, 단추를 눌렀을 때 모델에 어떤 것을 추가 할 때 컬렉션에서 뷰를 표시하는 데 어려움이 있습니다. 새로 추가 된 사람이 zview에 표시됩니다. 아래 코드는 내 코드입니다. 구문 및 설명과 함께 어떤 도움이 apprecciated됩니다

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

$(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 코드. kinakuta의 의견을보고뿐만 아니라 감사

Answer 1

나는 다음과 같은보고 좋을 것 : 모든

첫째, 당신은 무효 자바 스크립트와 같이 zview에서 다음 코드를 제거해야한다. 렌더링 할 때 다음

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

: 당신이 당신의 zview보기의 인스턴스를 만들 때와

var showit = new zview(); 

을 대체 할 수 있도록

model: Person, 

는 그런 다음, 인수로 모델을 전달할 수 있습니다 당신의 모델을 바로 참조 할 수 있습니다. 교체

시도 :

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

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

적어도 당신이 올바른 궤도에 시작한다.