Backbone 将新数据添加到 collection 时，视图需要一些时间来加载

Question

我是 backbone 的新手，正在使用 backbone 内置的 CMS。 CMS 允许创建者为网站添加新主页。来自 API 的 50 个项目的响应大小约为 25mb。我的 HTML 页面有一个加载按钮，它会触发一个事件并在单击时加载 50 个以上的项目。我面临的问题是，当点击被触发时，视图需要一些时间来加载，即视图消失，用户忘记了他在加载视图之前的位置。有没有办法让它使视图渲染更快，这样它就不会消失并且用户可以记住他的确切位置。单击带有 class load-more 的按钮时会触发加载更多数据的事件。这是我的代码的一部分。观点：

cms.views.Homepages = Backbone.View.extend({

events: {
'click .filter li': 'filterArticles',
'click .list-column-title' : 'openLink',
'click .homepageAction': 'updateHomepageStatus',
'click .more-actions .delete': 'deleteHomepage',
'click .more-actions .duplicate': 'duplicate',
'click .editPubDate': 'editPubDate',
'click .next': 'nextItems',
'click .prev': 'prevItems',
'click .load-more': 'loadMore'
 },  initialize: function(homepages, articles) {

this.template = new EJS({url: 'app/views/root/homepages/homepages.template.ejs'});
this.homepagesTableTemplate = new EJS({url: 'app/views/root/homepages/homepages-table.template.ejs'});
this.listenTo(cms.data.homepages, 'loaded', this.displayTable,this.render);
cms.data.homepages.load();


this.listenTo(cms.data.homepages, 'nomoreload', this.disableMoreLoad)

this.initDialogs();}, 


 render: function(options) {

var html = this.template.render({homepages: cms.data.homepages.toJSON()});
this.$el.html(html);
return this;
 },

loadMore: function(e) {
e.preventDefault();

this.collection.loadMore();
//this.collection.reset(newmodel.loadMore());
console.log( this.collection);}

我的代码collection

cms.collections.HomePages = Backbone.Collection.extend({

 model: cms.models.HomePage,

 currentPage: 0,

 url: function () {
//console.log(this,  this.currentPage )
return cms.config.BASE_URL + 'cms/homepage?page=' + this.currentPage + '&per_page=50&filter[sort]=creationdate_desc'
},
loadMore: function() {
this.currentPage ++;
var self = this;
 this.fetch({
  success: function(collection, response) {
    self.trigger('loaded', null);
    // if response less than 50 -> end of load      
    console.log(collection);

    if (response.length === 0) {
      self.trigger('nomoreload', null);
    }

  },
  error: function() {
    self.trigger('loaded', true);
  },
  remove: false
});

Answer 1

作为，25 MB 是主页上的大量数据。在这种情况下，您将不得不优化您的代码，以便分块获得响应并仅显示用户需要的内容。
另一种方法是在 Web worker 中存储一定数量的数据，这样您就可以直接从那里提供大量数据，从而避免网络调用。在需要时获取新数据，并通过清除以前的陈旧数据将其存储在 Web Worker 中。

Backbone 将新数据添加到 collection 时，视图需要一些时间来加载

Backbone view takes some time to load when new data is added to the collection

javascript

html

backbone.js

ejs

backbone-views