BackboneJS - How to hide a <button> when all models has been loaded

Question

I want to hide my "show more"-button as soon all my models has been loaded into the collection. How can I achieve that? Lets say, I have a collection which contain 20 models. I display 4 to start with and when I have clicked myself through to all 20 models, the "showMore"- button should disappear.

So far I have in my View:

events: {
    'click .showMore': 'showMore'
},
showMore: function(){
    this.collection.fetch({remove: false});
},  

afterRender: function(){
    var collection = this.collection;
    if(collection.length > 3) {
        $('<button class="showMore">Show more</button>').insertAfter('div.news');
    }       
}

And my Collection:

myCollection = Backbone.Collection.extend({
    step: 0,
    parse: function(response){
        var slice = response.data.news.slice(this.step*4,(this.step+1)*4)
        this.step++;
        return slice;
    }           
});

Thanks in advance...

Answer 1

I solved myself in a different way!

If I console.log the length, the collection has the amount of models given by the var slice-function I have in my Collection (see code).

So I made it like this:

afterRender: function(){
    $("article.news:gt(3)").hide();
    var count =  $("article.news").length;
    if(count === 1){
        $(".showmore").hide();
    }
    var i = 4;
    $(".showmore").on("click" , function() {
        i = i + 4;    
        $("article.news:lt(" + i + ")").show();
        if(i > count){
            $(".showmore").hide();
        }
    });         
}

and removed the .slice()-method completely.

article.news is the model selector in this case.

Its not the prettiest solution, but it works for me.