javascript - 无法将集合绑定到视图

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: []}没有。quizs 应该只是一个数组，而不是一个对象。

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