Javascript 在获取内容之前调用Backbone.js render_Javascript_Backbone.js

Javascript 在获取内容之前调用Backbone.js render

javascript backbone.js

Javascript 在获取内容之前调用Backbone.js render,javascript,backbone.js,Javascript,Backbone.js,我找到了一些Backbone.js代码的示例，然后根据需要采用了这些代码在获取任何内容之前调用CommentListView的render函数。当有内容要呈现时，似乎不会再次调用它后端返回两个结果，因此这不是问题所在 // Models window.Comment = Backbone.Model.extend(); window.CommentCollection = Backbone.Collection.extend({ model:Comment, url:"/a

我找到了一些Backbone.js代码的示例，然后根据需要采用了这些代码

在获取任何内容之前调用CommentListView的render函数。当有内容要呈现时，似乎不会再次调用它

后端返回两个结果，因此这不是问题所在

// Models
window.Comment = Backbone.Model.extend();

window.CommentCollection = Backbone.Collection.extend({
    model:Comment,
    url:"/api/comments/cosmopolitan"
});


// Views
window.CommentListView = Backbone.View.extend({

    tagName:'ul',

    initialize:function () {
        this.model.bind("reset", this.render, this);
    },

    render:function (eventName) {
        console.log(this.model.models);
        _.each(this.model.models, function (comment) {
            console.log(comment);
            $(this.el).append(new CommentListItemView({model:comment}).render().el);
        }, this);
        return this;
    }

});

window.CommentListItemView = Backbone.View.extend({

    tagName:"li",

    template:_.template($('#tpl-comment-list-item').html()),

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }

});

// Router
var AppRouter = Backbone.Router.extend({

    routes:{
        "":"list"
    },

    list:function () {
        this.commentList = new CommentCollection();
        this.commentListView = new CommentListView({model:this.commentList});
        this.commentList.fetch();

        $('#sidebar').html(this.commentListView.render().el);
    }
});

var app = new AppRouter();
Backbone.history.start();

通常用于为获取创建侦听器，当获取完成并更改模型或集合时，会有回调。试试这个：

var AppRouter = Backbone.Router.extend({

    routes:{
        "":"list"
    },

    list:function () {
        this.commentList = new CommentCollection();
        this.commentListView = new CommentListView({model:this.commentList});
        this.listenTo(this.commentList,'change', this.makeRender);
        this.commentList.fetch();


    },
    makeRender: function(){
        $('#sidebar').html(this.commentListView.render().el);
   }

});

通常用于为获取创建侦听器，当获取完成并更改模型或集合时，会有回调。试试这个：

var AppRouter = Backbone.Router.extend({

    routes:{
        "":"list"
    },

    list:function () {
        this.commentList = new CommentCollection();
        this.commentListView = new CommentListView({model:this.commentList});
        this.listenTo(this.commentList,'change', this.makeRender);
        this.commentList.fetch();


    },
    makeRender: function(){
        $('#sidebar').html(this.commentListView.render().el);
   }

});

在主干网1.0.0中，fetch的行为发生了一些变化。从：

将集合的更新重命名为set，以便与类似的model.set并行，并与reset形成对比。它现在是获取后的默认更新机制。如果要继续使用reset，请传递{reset:true}。并说：

获取集合。获取[选项]

从服务器获取此集合的默认模型集，并在模型到达时在集合上进行设置。[…]当模型数据从服务器返回时，它使用set智能地合并获取的模型，除非您通过{reset:true}

您的初始化仅绑定到重置：

您可以绑定到将生成的添加、删除和更改事件，也可以在获取以下内容时显式请求重置事件：

我在这里的时候还有几件事：

由于CommentListView视图使用的是集合而不是模型，因此您可能希望将其称为集合：

然后在视图中引用此.collection。有关视图构造函数如何处理其参数的详细信息，请参见

集合有多种类型，因此您可以说this.collection.eachfunctionmodel{…}，而不是uz.eachthis.model.models。。。。视图维护一个jQuery封装el的缓存版本，因此您可以这样说。$el而不是$this.el。要小心像console.logthis.model.models这样的东西。控制台通常会捕获一个实时引用，因此当您查看时，控制台中显示的将是this.model.models的状态，而不是调用console.log时。当遇到计时和AJAX问题时，使用console.logthis.model.toJSON更可靠。您可能希望切换到而不是AKA on，因为它不太容易发生内存泄漏。在主干网1.0.0中，fetch的行为发生了一些变化。从：