本文介绍了加载更多的数据按钮骨干的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个问题,我试图写一个简单的应用程序点击显示更多的按钮,但不能弄清楚如何做到这一点之后,将加载JSON文件更多的数据:/
我有应用程序,它显示从JSON文件3个要素,我想显示3个后,单击显示更多按钮。我在JSON 9个项目后达到极限(这9个项目),然后单击显示更多我想要显示的警报已到达极限。
在code:
$(函数(){
变种任务= Backbone.Model.extend();
VAR TasksList = Backbone.Collection.extend({
型号:任务,
网址:JSON / data.json
});
VAR TasksView = Backbone.View.extend({ EL:#tasks',
CON:3,
事件:{
点击#负载更':'load_more
}, 模板:_.template($('#taskTemplate')HTML()。) 初始化:功能(){
this.listenTo(this.collection,复位,this.render); }, 渲染:功能(){
_.each(this.collection.first(this.con),功能(任务){
变种的html = this.template(task.toJSON()); 这$ el.append(HTML)。
}, 这个); 返回此;
},
load_more:功能(){
// loade更多范围
}
});VAR任务=新TasksList()
tasksView =新TasksView({集合:任务});tasks.fetch({重置:真});
解决方案
移动外DOM ready函数的类定义,它是不好的做法
renderTask:函数(任务){
VAR HTML; 的HTML = this.template(task.toJSON()); 这$ el.append(HTML)。
},渲染:功能(){
VAR任务= this.collection.first(this.con); _.each(任务,this.renderTask,这一点); this.count = tasks.length;
},onClickMore:函数(事件){
VAR任务= this.collection.models.slice(this.count,this.count + this.con); 。事件preventDefault(); 如果(tasks.length){
_.each(任务,this.renderTask,这一点); this.count + = tasks.length;
}其他{
警报(限价达到');
}
}
I have a problem I was trying to write a simple app which will load more data for json file after clicking show more button but cant figure it out how to do this :/I have app which show 3 elements from json file and I want to display 3 more after click show more button. I have 9 items in json and after reach the limit (this 9 items) and click show more I want to display alert that the limit is reached.The code:
$(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 });
解决方案
Move your class definitions outside DOM ready function, its bad practice
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');
}
}
这篇关于加载更多的数据按钮骨干的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!