컬렉션을 볼 수 있도록 바인드 할 수 없습니다.

Question

컬렉션을 보려면 어떻게 바인딩합니까? http://jsfiddle.net/zQYh5/

HTML

<div class="row" id="quizs"> 
    <script type="text/template" id="quizTemplate"> 
    <h1><%= title %>< /h1> 
    </script> 
</div> 
<button id="next">Next</button> 

자바 스크립트

- 내가 디버깅 할 때 나는

내 코드 QuizView에 this.collection.get() 또는 this.collection.at()를 사용할 수 없습니다

$(function() { 
    var Quiz = Backbone.Model.extend({}); 
    var QuizList = Backbone.Collection.extend({ 
    model: Quiz 
    }); 
    var quizs = {[{id: 1, title: "a"},{id: 2,title: "b"},{id: 3,title: "c"},{id: 4,title: "d"},]} 
    var QuestionView = Backbone.View.extend({ 
    events: { 
     'click #next': 'showNextQuestion' 
    }, 
    collection: quizs, 
    initialize: function() { 
     _.bindAll(this, "showNextQuestion", "render"); 
     this.currentIndex = 0; 
     this.render(); 
    }, 
    showNextQuestion: function() { 
     this.currentIndex++; 
     if (this.currentIndex < this.collection.length) { 
     this.render(); 
     } 
    }, 
    render: function() { 
     var template = _.template($("#quizTemplate").html(), this.collection.at(this.currentIndex)); 
     this.$el.html(template); 
    }, 
    }); 
    var app = new QuestionView({}); 
}) 

Answer 1

업데이트 : http://jsfiddle.net/GijsjanB/zQYh5/2/

<script type="text/template" id="quizTemplate"> 
    <h1><%= title %></h1> 
</script> 

<div id="myQuiz"> 
    <div class="row" id="quizs"></div> 
    <button id="next">Next</button> 
</div> 

및

$(function() { 
    var Quiz = Backbone.Model.extend({}); 
    var QuizList = Backbone.Collection.extend({ 
     model: Quiz 
    }); 
    var quizs = [{ 
     id: 1, 
     title: "a" 
    }, { 
     id: 2, 
     title: "b" 
    }, { 
     id: 3, 
     title: "c" 
    }, { 
     id: 4, 
     title: "d" 
    }]; 
    var QuestionView = Backbone.View.extend({ 
     events: { 
      'click #next': 'showNextQuestion' 
     }, 
     initialize: function() { 
      this.currentIndex = 0; 
      this.render(); 
     }, 
     showNextQuestion: function() { 
      this.currentIndex++; 
      if (this.currentIndex < this.collection.length) { 
       this.render(); 
      } 
     }, 
     render: function() { 
      var template = _.template($("#quizTemplate").html(), this.collection.at(this.currentIndex).toJSON()); 
      this.$('#quizs').html(template); 
     } 
    }); 
    var app = new QuestionView({ 
     el: $('#myQuiz'), 
     collection: new QuizList(quizs) 
    }); 
}); 

은 몇 가지 문제가 있었다 :

• 당신은보기로 인스턴스화 수집을 전달하거나 뷰의 초기화 함수에서 인스턴스화해야합니다.
• <button>은보기 범위 밖에 있습니다.
• <script>을보기 범위 밖으로 이동하십시오.
• quizs var는 오류를 발생시킵니다. 개체는 배열로 수행 할 작업을 알지 못합니다. {[]}은 오류를 제공하고 {myArr: []}은 그렇지 않습니다. 퀴즈는 객체가 아니라 배열이어야합니다.

Answer 2

<script type="text/template" id="quizTemplate"> 
    <h1> <%= title %> </h1> 
</script> 
<div class="view" id="QuestionView"> 
    <div class="row" id="quizs"></div> 
    <button id="next">Next</button> 
</div> 

$(function() { 
    var Quiz = Backbone.Model.extend({}), 
     QuizList = Backbone.Collection.extend({ 
        model: Quiz 
        }), 
     quizs = [{ 
        id: 1, 
        title: "a" 
       }, { 
        id: 2, 
        title: "b" 
       }, { 
        id: 3, 
        title: "c" 
       }, { 
        id: 4, 
        title: "d" 
       }], 
     QuestionView = Backbone.View.extend({ 
         events: { 
          'click #next': 'showNextQuestion' 
         }, 
         collection: new QuizList(quizs), 
         initialize: function() { 
          this.currentIndex = 0; 
          this.render(); 
         }, 
         showNextQuestion: function() { 
          this.currentIndex++; 

          if (this.currentIndex < this.collection.length) { 
           this.render(); 
          } 
         }, 
         render: function() { 
          var template = _.template($("#quizTemplate").html(), this.collection.at(this.currentIndex).toJSON()); 

          this.$('#quizs').html(template); 
         } 
         }), 
     app = new QuestionView({ 
       el: $('#QuestionView') 
       }); 
});