xin - lazy load on event scroll

// xin View
var view = xin.ui.Outlet.extend({
    _isLoading: false,
    bundles: [],
    form: {},
    events: {
        'change #compareBibleSelect': 'bibleChange',
        'submit form#formCompareSubmit': 'compareSubmit'
    },

    scrolling: function(evt) {
        var view = app.get('view');
        var $container = view.$el.find('[data-region="body"]');
        var $content = view.$el.find('.resultCompare');
        if ($container.scrollTop() >= ($content.height() - $container.height())) {
            if (!this._isLoading && this.form) {
                this._loadCompare();
            }
        }
    },

    bibleChange: function(evt) {

        var that    = this,
            data    = $(evt.target).val() || [],
            status  = [],
            bundle  = [];

            that.bundles = [];
            for (var i = 0; i < data.length; i++) {
                if (data[i] != '0') {
                    bundle.push($(evt.target).find('option[value="'+data[i]+'"]').val());
                    status.push($(evt.target).find('option[value="'+data[i]+'"]').text());
                }
            }
            that.bundles = bundle;

            var st = '';
            if(status.length) {

                that.$el.find('.resultCompare').html('<ul class="resultCompareAlkitab" />');

                app.bundle.getManifest(bundle[0], function(manifest){
                    var comp = manifest.component;
                    that.$el.find('#compareBookSelect').html(null);
                    for (var i in comp) {
                        that.$el.find('#compareBookSelect').append('<option value="'+comp[i].file+'">'+comp[i].title+'</option>');
                    }
                });

                for (var j = 0; j < status.length; j++) {
                    that.$el.find('.resultCompare > .resultCompareAlkitab').append('<li>'+status[j]+'</li>');
                }
                st = status.join(', ');

            } else {
                st = app.lang.get('pilih alkitab');
                that.$el.find('#compareBookSelect').html('<option value="0" selected>'+app.lang.get('pilih kitab')+'</option>');
                that.$el.find('.resultCompare').html(null);
                that.$el.find('ul.resultCompareAlkitab').remove();
            }

        $(evt.target).find('option:first').html(st);
        $(evt.target).find('option:first').prop('selected', true);

    },

    compareSubmit: function(evt) {

        var that = this,
            countAlkitab = $('ul.resultCompareAlkitab').find('li').length;

        if(countAlkitab > 1) {

            var form = {
                bundles: that.bundles,
                book: that.$el.find('#compareBookSelect').val()
            };

            var chapter = parseInt(that.$el.find('input[name="chapter"]').val());
            if(chapter) {
                form.chapter = chapter;
            }
            var verse = parseInt(that.$el.find('input[name="verse"]').val());
            if(verse) {
                form.verse = verse;
            }
            that.$el.find('.recultCompareCapter').remove();
            that.form = form;
            that._loadCompare();

        } else {
            app.showMessage(app.lang.get('pilih 2 atau 3'));
        }

        return false;
    },

    _loadCompare: function() {

        var that = this,
            bundleMap = {},
            form = that.form;

        app.loading.show();
        that._isLoading = true;

        $.when((function() {
            var def = new $.Deferred();
            app.invoke('bundle.map', { key: 'code'}, function(data, err) {
                bundleMap = data;
                def.resolve();
            });
            return def.promise();
        })()).done(function() {

            app.invoke('library.compare', form, function(data, err) {

                var i, tr;
                if (err) {
                    app.showMessage(app.lang.get('kesalahan system: "') + err.message + app.lang.get('". silakan hubungi Web Master'));
                    app.loading.hide();
                    this._isLoading = false;
                    // callback();
                    return;
                } else {

                    if (data.nextChapter && data.nextVerse) {
                        if (data.nextChapter) {
                            that.form.startChapter = data.nextChapter;
                        }

                        if (data.nextVerse) {
                            that.form.startVerse = data.nextVerse;
                        }
                    } else {
                        that.form = null;
                    }

                    var _data = data.data;

                    for (var i in _data) {

                        var $verse = $('<ul class="recultCompareCapter" />'),
                            v = _data[i];

                        for (var j = 0; j < v.length; j++) {
                            if(v[j]) {
                                $verse.append('<li> <strong>'+v[j].chapter+':'+v[j].verse+'</strong> '+v[j].content+'</li>');
                            } else {
                                $verse.append('<li> - </li>');
                            }
                        }
                        $('.resultCompare').append($verse);

                    }

                    app.loading.hide();
                    that._isLoading = false;
                    return;
                }

            });

        });
    },

});
    
// Event Listener
view.$el.find('[data-region="body"]').off('scroll').on('scroll', function() {
    view.scrolling.apply(view, []);
});