How to render only three data elements each time when you click on load more? Backbone

Question

I have a list of card elements and each of these card contains some info. With a load more option, I am trying to load only three card elements at a time and by default only two are loaded initially. Below is my view file:

(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);

Also my Haml code is below:

- 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

Here I am trying to display the entire two certification-card by default and load the rest three at a times only on click of load more.Help woould be appreciated

Answer 1

You can do something like this (pseudo code) :

CertificationCard.prototype.initialize = function() {
  this.currentIndex = 0;
  this.loadMoreIncrement = 3
  this.render(2);
};

CertificationCard.prototype.render = function(increment) {
  const newIndex = this.currentIndex + increment;
  cost models = this.card_data.slice(this.currentIndex, newIndex);
  this.$el.append(this.renderCards(models));
  this.currentIndex = newIndex;
};

CertificationCard.prototype.renderCards = function(models) {
  return this.template({
    view_type: this.view_type,
    card_data: models
  });
};

CertificationCard.prototype.renderLoadMore = function() {
  this.render(this.loadMoreIncrement);
};