本文介绍了加载更多的数据按钮骨干的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个问题,我试图写一个简单的应用程序点击显示更多的按钮,但不能弄清楚如何做到这一点之后,将加载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');
    }
}

这篇关于加载更多的数据按钮骨干的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-12 14:40