骨干抓取页面加载集合 [英] backbone fetch collection on page load

问题描述

我知道，骨干医生说的获取不应该被用来填充在页面加载的集合，我有种找出原因：

i know that backbone doc says fetch should not be used to populate collections on page load，and i kind of figure out why:

var appCollection = Backbone.Collection.extend({
    model:appModel,
    url:'api/app',
    initialize:function(){
        this.fetch();
    },

});

var homeView = Backbone.View.extend({
    el:'#content',
    initialize:function(){
        this.collection = new appCollection(appModel)
        this.render()   

    },
    render: function () {
        var that = this;
        alert(1);
        _.each(this.collection.models, function (item) {
            that.renderApp(item);
         }, this);


    },

    renderApp: function (item) {
        var appview = new appView({
            model: item
        });

        this.$el.append(appview.render().el);
    }
})
 var home = new homeView();

在homeview.render功能集合之前实际上被调用牵强，所以当我删除警报（1）;我的应用程序不会得到呈现，而我得到一些错误，说：APPNAME（模板）是不确定的。

the homeview.render function actually get called before the collection fetched, so when i remove the alert(1); my app wont get rendered, and i get some error says "appname"(template) is undefined.

任何想法如何做到这一点？

any idea how to do this?

抓取方法来真是得心应手，我不介意等待几秒钟，其实我是打算证明，表明该页面正在初始化，因为我得到了很多其他的事情来下载一个进度条，所以是有可能使用和获取集合时获取实际塔，然后code继续运行???

the fetch method comes really handy and i dont mind to wait for a few second,actually i was intend to show a progress bar indicating that the page is initializing because i got lots of other thing to download,so is it possible to use fetch and when the collection is actually fetched then tha code continue to run???

推荐答案

让我们借此从开始：

var appCollection = Backbone.Collection.extend({
    model:appModel,
    url:'api/app',
    initialize:function(){
        this.fetch();
    },

});

我会避免在获取初始化。创建appCollection的实例不应必要取。因此，使用：

I would avoid fetching inside initialize. Creating an instance of an appCollection should not necessitate fetching. So use:

var appCollection = Backbone.Collection.extend({
    model:appModel,
    url:'api/app',    
});

然后，

var homeView = Backbone.View.extend({
    el:'#content',
    initialize:function(){
        this.collection = new appCollection(appModel)
        this.render()   

    },
    render: function () {
        var that = this, p;
        console.log('fetching...');
        p = this.collection.fetch();
        p.done(function () {
            console.log('fetched!');
            _.each(that.collection.models, function (item) {
                that.renderApp(item);
            }, that);
        });
    },

    renderApp: function (item) {
        var appview = new appView({
            model: item
        });

        this.$el.append(appview.render().el);
    }
})
var home = new homeView();

这可以让你渲染homeView，当收集被取出，它会显示它的车型。如果您有什么不明白 p.done 呢，来看看的 jQuery的递延。总之一个Ajax请求返回的承诺。当承诺被满足（即您的收藏被取出）递延火灾和任何功能，您在指定.done（）将被执行。
使用Where I 的console.log 点给的进展反馈。

This allows you to render your homeView and when the collection has been fetched, it will render its models. If you do not understand what p.done does, have a look at jQuery's Deferred. In brief an ajax request returns a promise. When the promise is fulfilled (i.e. your collection is fetched) the deferred fires and whatever function you specified in .done() will execute. Use the points where I console.log to give feedback on the progress.

这篇关于骨干抓取页面加载集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！