加载更多数据按钮主干

我有一个问题我正在尝试编写一个简单的应用程序,它将为json文件加载更多数据后点击显示更多按钮,但无法弄清楚如何做到这一点:/我有应用程序显示3个元素从json文件,我想单击显示更多按钮后再显示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'); } }