Question

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

(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

在这里，我尝试默认显示整个两张认证卡，并且仅在单击“加载更多”时一次加载其余三张。敬请帮助

Answer 1

您可以执行以下操作（伪代码）：

4|app | <--- Last few GCs --->
4|app |
4|app | [11385:0x2b893d0]   764692 ms: Mark-sweep 1398.5 (1871.3) -> 1398.5 (1871.3) MB, 27920.5 / 2.1 ms  allocation failure GC in old space requested
4|app | [11385:0x2b893d0]   789281 ms: Mark-sweep 1398.5 (1871.3) -> 1398.3 (1797.3) MB, 24586.0 / 4.6 ms  last resort
4|app | [11385:0x2b893d0]   797403 ms: Mark-sweep 1398.3 (1797.3) -> 1398.3 (1758.8) MB, 8119.9 / 1.0 ms  last resort
4|app |
4|app |
4|app | <--- JS stacktrace --->
4|app |
4|app | ==== JS stack trace =========================================
4|app |
4|app | Security context: 0x7e7bf028799 <JSObject>
4|app |     1: add [native collection.js:~111] [pc=0x7a887d1b539](this=0x13ebc6615671 <Set map = 0x18534a9053d9>,p=0x1d9c6aee7719 <String[24]: 5b9827afc5635e2a08f49b6f>)
4|app |     2: baseUniq [/home/app/node_modules/waterline/node_modules/lodash/index.js:~2670] [pc=0x7a887d4d51a](this=0x243308d07421 <JSGlobal Object>,array=0x13ebc66154d9 <JSArray[469241]>,iteratee=0x13ebc6615531 <JSFunction (sfi = 0x3fc29...

当您单击“加载更多”时，如何每次仅渲染三个数据元素？骨干

1 个答案: