无法绑定集合进行查看

Question

如何将集合绑定到视图？ 当我调试时，我无法在QuizView中使用this.collection.get（）或this.collection.at（）

我的代码 - 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>

的Javascript

$(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')
              });
});