加载更多数据按钮主干

Question

我有一个问题，我正在尝试编写一个简单的应用程序，该应用程序将在单击显示更多按钮后为 json 文件加载更多数据，但无法弄清楚如何执行此操作：/ 我有显示 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 就绪函数之外，这是不好的做法

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