Javascript 将自定义侦听器绑定到主干视图

我不熟悉javascript和Backbone.js。我想在初始化时将自定义侦听器绑定到主干视图。例如，我希望实现以下目标：

var CampaignListView = Backbone.View.extend({
    initialize: function(){
       this.on("customFunc")
    },
    customFunc: function() {
        if (this.$el.scrollTop() == 500 ) {
             console.log("this has occurred, time to do stuff")
          }
    }
)}

每当用户滚动到指定位置时，我都可以执行一些代码

谢谢。

您可以在主干视图中使用。例如，您可以附加到视图的滚动事件，但它当然会在每次滚动时触发。我根据您的示例编写了一个快速且非常简单的JSFIDLE。下面是一些JavaScript代码。注意代码中使用了事件{}

var CampainListView = Backbone.View.extend({
    el: '#list', 

    events: {
        'scroll': 'customFunc'    
    }, 

    initialize: function() { }, 

    render: function() {
        this.$el.html(sampleHtml);
        return this; 
    }, 

    customFunc: function() {
        // console.log('scrolling... top is ' + this.$el.scrollTop()); 
        if (this.$el.scrollTop() >= 100 ) {
          console.log("this has occurred, time to do stuff")
        }
    }
}); 

var view = new CampainListView(); 
view.render(); 

---

我想这是你想在窗口滚动时发生的事情，不是吗？在这种情况下，您有几个选择：

第一种方法更为熟悉，也更接近您所拥有的，使用

remove

方法来清理该绑定：

var CampaignListView = Backbone.View.extend({
    initialize: function(){
       // You probably want to add an identifier to the event name, like 'scroll.campainlist' or something
       $(window).on('scroll', _.bind(this.customFunc, this));
    },
    customFunc: function() {
        if (this.$el.scrollTop() == 500 ) {
             console.log("this has occurred, time to do stuff")
          }
    },
    remove: function() {
      $(window).off('scroll');
      Backbone.View.prototype.remove.call(this);
    }
)}

---

另一种选择是使用类似的：

var vent = _.extend({}, Backbone.Events);

$(window).on('scroll', function(ev) {
  vent.trigger('window:scroll', ev);
});

var CampaignListView = Backbone.View.extend({
    initialize: function(){
       this.listenTo(vent, 'window:scroll', this.customFunc);
    },
    customFunc: function() {
        if (this.$el.scrollTop() == 500 ) {
             console.log("this has occurred, time to do stuff")
          }
    }
)}