Question

我想在我的所有模型加载到集合中后立即隐藏我的“显示更多”按钮。我怎样才能做到这一点？可以说，我有一个包含20个模型的集合。我显示4开始，当我点击自己到所有20个模型时，“showMore” - 按钮应该消失。

到目前为止，我的视图中有：

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');
    }       
}

我的收藏：

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;
    }           
});

提前致谢...

Answer 1

您可以尝试计算页面上的模型数量。例如，如果您的模型位于<div class="myModel">，则可以添加

if(document.getElementByClassName('myModel').length == collection.length) {
    $('.showMore').hide()
}

到您的afterRender功能。

Answer 2

我用不同的方式解决了自己！

如果我控制了console.log的长度，那么该集合具有我在我的Collection中的var slice-function给出的模型数量（参见代码）。

所以我这样做了：

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();
        }
    });         
}

并完全删除了.slice() - 方法。

在这种情况下，

article.news是模型选择器。

它不是最漂亮的解决方案，但它对我有用。

BackboneJS - 如何在加载所有模型后隐藏<按钮> </button>

2 个答案: