加载更多的数据按钮骨干 [英] Load more data button backbone

问题描述

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

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