Javascript 加载更多数据按钮主干

我有一个问题，我正在尝试编写一个简单的应用程序，在单击“显示更多”按钮后，它将为json文件加载更多数据，但我不知道如何执行此操作：/ 我有一个显示json文件中3个元素的应用程序，我想在单击ShowMore按钮后再显示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 });

---

将类定义移到DOM就绪函数之外，这是一种糟糕的做法

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

---

非常感谢，但有一个错误this.collection.range不是var tasks=this.collection.rangethis.count，this.count+this.con中的函数；例如，当将范围更改为“第一”时，我总是收到警报对不起，我的坏消息。朋友，你救了我一天，你真是太棒了！还有一个问题是，这是一种延迟加载项目并添加throbber以加载的方法，例如3秒？