我有一个卡片元素的列表，每个卡片都包含一些信息。使用加载更多选项，我尝试一次只加载三个卡片元素，默认情况下最初只加载两个。下面是我的视图文件：

(function() {
  var __extends = function(child, parent) { for (var key in parent) { 
if (__hasProp.call(parent, key)) child[key] = parent[key]; } function 
ctor() { this.constructor = child; } ctor.prototype = parent.prototype; 
child.prototype = new ctor(); child.__super__ = parent.prototype; 
return child; },
__hasProp = {}.hasOwnProperty;

  TalentCardNew.Views.CertificationCard = (function(_super) {
__extends(CertificationCard, _super);

function CertificationCard() {
  return CertificationCard.__super__.constructor.apply(this, arguments);
}

CertificationCard.prototype.template = JST['talent_card_new/templates/common/certification_card'];

CertificationCard.prototype.className = 'certification-container';

CertificationCard.prototype.events = {
  'click .listCertificatesContainer': 'showMoreCertificates'
};

CertificationCard.prototype.initialize = function(options) {
  if (options == null) {
    options = {};
  }
  this.view_type = options.view_type;
  this.card_data = new Backbone.Collection();
  this.card_data.add(new Backbone.Model({
    name: "Accounting Qualification Excellence",
    place: "Accounting Institue",
    valid_till: "Dec 14, 2018"
  }));
  this.card_data.add(new Backbone.Model({
    name: "Accounting Qualification Excellence",
    place: "Accounting Institue",
    valid_till: "Dec 14, 2018"
  }));
  this.card_data.add(new Backbone.Model({
    name: "Accounting Qualification Excellence",
    place: "Accounting Institue",
    valid_till: "Dec 14, 2018"
  }));
  this.card_data.add(new Backbone.Model({
    name: "Accounting Qualification Excellence",
    place: "Accounting Institue",
    valid_till: "Dec 14, 2018"
  }));
  this.card_data.add(new Backbone.Model({
    name: "Accounting Qualification Excellence",
    place: "Accounting Institue",
    valid_till: "Dec 14, 2019"
  }));
  this.card_data.add(new Backbone.Model({
    name: "Accounting Qualification Excellence",
    place: "Accounting Institue",
    valid_till: "Dec 14, 2018"
  }));
  this.card_data.add(new Backbone.Model({
    name: "Accounting Qualification Excellence",
    place: "Accounting Institue",
    valid_till: "Dec 14, 2018"
  }));
  return this.card_data.add(new Backbone.Model({
    name: "Accounting Qualification Excellence",
    place: "Accounting Institue",
    valid_till: "Dec 14, 2019"
  }));
};

CertificationCard.prototype.render = function() {
  $(this.el).html(this.template({
    view_type: this.view_type,
    card_data: this.card_data
  }));
  if (this.view_type === 'my_profile') {
    this.renderModal();
  }
  this.renderLoadMore();
  return this;
};

CertificationCard.prototype.renderModal = function() {
  var popup_view;
  popup_view = new TalentCardNew.Views.AddCertification();
  return $(this.el).find('#modalContainer').html(popup_view.render().el);
};

CertificationCard.prototype.renderLoadMore = function() {
  if ((this.view_type === 'my_profile' && this.card_data.length > 2) || (this.card_data.length > 3)) {
    return $(this.el).find('.listCertificatesContainer').removeClass('hide');
  }
};

return CertificationCard;

})(Backbone.View);

}).call(this);

另外我的Haml代码如下：

- now = new Date()
- if @view_type == 'my_profile'
  %button.certification-card.add-certification-card{"data-target" => 
"#certificationModal", "data-toggle" => "modal"}
    %i.avatar--icon.fa.fa-plus-circle
    %elabel= ECL.t('add', default_value: "Add")
- _.each @card_data.models, (data) =>
  - expire_date = "#{data.get('valid_till')}"
  - actual_date = new Date(expire_date)
  .certification-card
    .avatar--icon.fa.fa-users
    .details
      .title= "#{data.get('name')}"
      .caption= "#{data.get('place')}"
      - if actual_date < now
        .meta-text= "Valid Till: #{data.get('valid_till')}"
      - else
        .meta-text= "Expired On: #{data.get('valid_till')}"
%button.btn-more.listCertificatesContainer.hide
  Load More

# modalContainer

在这里，我试图显示整个两个证书卡默认和加载其余三个在一次只有在点击加载更多。帮助将不胜感激