从HTML Select表单动态更改Backbone.js中集合的大小

// HTML
<select id="collectionSize">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

// Backbone.js
var MyCollection = Backbone.Collection.extend({
  // 定义集合中的模型
  model: MyModel,

  // 定义方法来更改集合的大小
  changeSize: function(size) {
    var currentSize = this.length;

    if (size > currentSize) {
      // 添加模型，使集合的大小达到指定大小
      for (var i = currentSize; i < size; i++) {
        this.add(new MyModel());
      }
    } else if (size < currentSize) {
      // 移除模型，使集合的大小达到指定大小
      for (var i = currentSize - 1; i >= size; i--) {
        this.remove(this.at(i));
      }
    }
  }
});

// 监听HTML Select表单的change事件
$('#collectionSize').on('change', function() {
  var size = parseInt($(this).val());
  myCollection.changeSize(size);
});