backbone collection. “load more” button

Question

Im quite new to backbone and trying to add an "load more"-button toe the project. I want the button to load lets say six new items from my collection every time it gets clicked. How would i implement that?

Right now i have the whole collection loaded when the view initziales. But i guess it would be better to just load six items? (the ones that will be visible) and then i want to append six new ones on every click on "load more".

Anyone the can show me/help me on this one?

Collection

define([
'Underscore',
'Backbone',
'app',
'VideoModel',
], function (_, Backbone, app, VideoModel) {

var VideoCollection = Backbone.Collection.extend({  
    model: VideoModel,  
    url: url,
    parse: function (response) {
        return response;
    },
    initialize: function() {

    }    
}); 
return VideoCollection;

});

Model

define([
'Underscore',
'Backbone',
'app',

], function (_, Backbone, app) {

var VideoModel = Backbone.Model.extend({  
    defaults: function() {  
        return {
            data: {
                id: "",
                created: "",
                timestamp: ""
            }
        };
    },  
    clear: function() {  
        this.destroy();  
    }
}); 
return VideoModel;

});

View

define([
'Underscore',
'Backbone',
'app',
'VideoCollection'

], function (_, Backbone, app, VideoCollection) {

var StartView = Backbone.View.extend({

    tagName: "section",
    id: "start",
    className: "content",

    events: {

    },
    initialize: function(){
        $(".container").html(this.el);
        this.template = _.template($("#start_template").html(), {} );
        this.collection = new VideoCollection();
        this.render();
    },
    render: function(){
        this.$el.html(this.template);
        this.collection.fetch({
            success: function (obj) {
                var json = obj.toJSON()

                for(var i=0; i<json.length; i++) {

                }
            }
        });
    },
    kill: function() {
        this.remove(); 
    }
});
return StartView;
});

jcvandan jcvandan · Accepted Answer · 2013-12-17T14:29:22

I would say the best thing to do is use 2 instances of the same collection. One that has all the models in it, and one that just has visible models in it. You can bind your view to the 'visible' collection, and when you click load more, just copy models from your complete collection to your visible collection. I'm not going to write the code for this, as your StartView as it stands needs a bit of refactoring, I would try and do the following with your view:

Remove your collection.fetch and render calls from your view, and move them into an object which controls your application, sets up your views etc. That way the view is quite a dumb object, it knows about it's DOM elements, the collection it needs to render, and that's about it.
Don't use the fetch success callback. A successful call to fetch will result in either add or remove event's being fired. You can bind to these event's like so:

this.collection = new VideoCollection();

this.collection.bind('add remove', this.render, this);

this.collection.fetch();

backbone collection. “load more” button

1 Answers