Question

我的应用程序中有一个奇怪的问题。当我渲染一个集合时，如果我打印它是“空”但是当我在console.log这个集合内部集合时，模型内部有两个数组。这是我的剧本：

define([
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/folder.html',
    'models/folder',
    'collections/folder',
    ], function($, _, Backbone, FolderTemplate, FolderModel, FolderCollection){
    var FolderView = Backbone.View.extend({
        el:$('#folder'),
        template:_.template(FolderTemplate),

        initialize: function(){
            this.render();
        },
        render: function(){
            console.log(this.collection.models);
        }
    });

    return FolderView;
});

调用我在另一个应用程序中使用它的视图：

this.folders = new FolderCollection();
this.folders.fetch({ data: { dir: 'uploads'} });
this.foldersView = new FolderView({collection: this.folders});

使用此应用console.log(this.collection.models);为空但是如果我使用setTimeOut制作这样的东西，它就可以运行console.log，返回正确的数组：

define([
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/folder.html',
    'models/folder',
    'collections/folder',
    ], function($, _, Backbone, FolderTemplate, FolderModel, FolderCollection){
    var FolderView = Backbone.View.extend({
        el:$('#folder'),
        template:_.template(FolderTemplate),

        initialize: function(){
            var here = this;
            setTimeout(function(){
                  here.render();
            },800);
        },
        render: function(){
            console.log(this.collection.models);
        }
    });

    return FolderView;
});

如果没有setTimeOut，我怎么能使用this.render()，因为我认为做出类似的事情是不正确的或不是逻辑。

由于

Answer 1

您可以收听将调用reset方法

的render事件

替换

initialize: function(){
   var here = this;
   setTimeout(function(){
   here.render();
   },800);
},

带

initialize: function(){
   this.listenTo(this.collection, 'reset', this.render);
},

Answer 2

试试这个：

initialize: function(){
  var self = this;
  this.collection.fetch({
     success: function(){
         self.render();
     }
  });
}

Answer 3

您必须这样做是因为this.folders.fetch需要时间。您应该使用events而不是设置超时。 Collection.fetch会在成功时发起change事件。

所以，请考虑以下内容：

this.collection.on("change", this.render);

骨干渲染setTimeOut

3 个答案: