Question

define([
    'jquery',
    'underscore',
    'backbone',
    'collections/jobs',
    'text!templates/jobs/list.html'
], function($, _, Backbone, JobCollection, JobListTemplate){
    var JobWidget = Backbone.View.extend({
        el: '#bbJobList',
        initialize: function () {
            // isLoading is a useful flag to make sure we don't send off more than
            // one request at a time
            this.isLoading = false;
            this.jobCollection = new JobCollection();
        },
        render: function () {
            this.loadResults();
        },
        loadResults: function () {
            var that = this;
            // we are starting a new load of results so set isLoading to true
            this.isLoading = true;
            // fetch is Backbone.js native function for calling and parsing the collection url
            this.jobCollection.fetch({
                success: function (jobs) {
                    // Once the results are returned lets populate our template
                    $(that.el).append(_.template(JobListTemplate, {jobs: jobs.models, _:_}));
                    // Now we have finished loading set isLoading back to false
                    that.isLoading = false;
                }
            });
        },
        // This will simply listen for scroll events on the current el
        events: {
            'scroll': 'checkScroll'
        },
        checkScroll: function () {
            console.log("Scrolling");
            var triggerPoint = 50; // 100px from the bottom
            if( !this.isLoading && this.el.scrollTop + this.el.clientHeight + triggerPoint > this.el.scrollHeight ) {
                this.jobCollection.page += 1; // Load next page
                this.loadResults();
            }
        }
    });
    return JobWidget;
});

我似乎无法从射击中获得该事件。 console.log甚至不会开火。我也试图滚动Windows，el实际上是一个div。对此有何建议？

Answer 1

#bbJobList元素应该有滚动条 - overflow: auto|scroll css规则。否则滚动事件不会触发。

骨干滚动事件未触发

1 个答案: