Question

我是骨干的新手，并且正在开发一个内置于主干网的CMS。 CMS允许创建者为网站添加新的主页。来自API的50个项目的响应大小约为25mb。我的HTML页面有一个加载按钮，用于触发事件并在单击时加载50个项目。我面临的问题是，当点击被激活时，视图需要一些时间加载，即视图消失，用户在加载视图之前忘记了他的位置。有没有办法让它使视图呈现更快，因此它不会消失，用户可以记住他到底在哪里。当单击具有类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);}

我的收藏中的代码

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

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

将新数据添加到集合时，骨干视图需要一些时间来加载

1 个答案: