加载更多数据按钮的骨干

Question

我有一个问题我正试图编写一个简单的应用程序，它将单击显示更多按钮后，将无法找到如何做到这一点： json文件中的3个元素，我想在点击显示更多按钮后再显示3个元素。我在json中有9个项目，达到限制后（这9个项目），然后单击显示更多我想显示警报已达到限制。 代码：

$(function() { 
    var Tasks = Backbone.Model.extend(); 
    var TasksList = Backbone.Collection.extend({ 
     model: Tasks, 
     url: 'json/data.json' 
    }); 


    var TasksView = Backbone.View.extend({ 

    el: '#tasks', 
    con: 3, 
    events: { 
     'click #load-more': 'load_more' 
    }, 

    template: _.template($('#taskTemplate').html()), 

    initialize: function() { 
     this.listenTo(this.collection, 'reset', this.render); 

    }, 

    render: function() { 
     _.each(this.collection.first(this.con), function (task) { 
      var html = this.template(task.toJSON()); 

      this.$el.append(html); 
     }, this); 

     return this; 
    }, 
    load_more: function(){ 
     //loade more scope 
    } 
}); 

var tasks = new TasksList(), 
    tasksView = new TasksView({ collection: tasks }); 

tasks.fetch({ reset:true }); 

Answer 1

移动外DOM ready函数类的定义，它是不好的做法

renderTask: function (task) { 
    var html; 

    html = this.template(task.toJSON()); 

    this.$el.append(html); 
}, 

render: function() { 
    var tasks = this.collection.first(this.con); 

    _.each(tasks, this.renderTask, this); 

    this.count = tasks.length; 
}, 

onClickMore: function (event) { 
    var tasks = this.collection.models.slice(this.count, this.count + this.con); 

    event.preventDefault(); 

    if (tasks.length) { 
     _.each(tasks, this.renderTask, this); 

     this.count += tasks.length; 
    } else { 
     alert('Limit is reached'); 
    } 
}