discourse / ember / javascript

Vinculação para rolar eventos com Ember.js

Você pode aprender muito lendo o código-fonte do discurso. Hoje eu encontrei um bom mixin que torna fácil receber uma notificação quando a janela do navegador é rolada. Aqui está o que aprendi …

Vincular a eventos de rolagem / toque do navegador é fácil:

App.Scrolling = Em.Mixin.create({

  bindScrolling: function(opts) {
    var onScroll, _this = this;

    onScroll = function(){ 
        return _this.scrolled(); 
    };

    $(document).bind('touchmove', onScroll);
    $(window).bind('scroll', onScroll);
  },

  unbindScrolling: function() {
    $(window).unbind('scroll');
    $(document).unbind('touchmove');
  }

});

Usando o mixin acima, você pode ligar / desligar para rolar eventos de qualquer visualização:

App.MyView = Ember.View.extend(App.Scrolling, {
    didInsertElement: function() {
        this.bindScrolling();
    },
    willRemoveElement: function() {
        this.unbindScrolling();
    },
    scrolled: function() {
      console.log('MyView was scrolled')
    }
});

Provavelmente, os eventos de rolagem precisam ser depurados!

Os eventos de rolagem são acionados muito rapidamente, então o método scroll () da view acima será chamado como um louco. A única maneira sensata de fazer isso é debouncing . O Discourse faz isso adicionando uma função ao namespace do aplicativo. Supondo que tenhamos o nosso próprio, o mixin rolável pode usá-lo para controlar as notificações de rolagem:debounce()App.debounce

App.Scrolling = Em.Mixin.create({

  bindScrolling: function(opts) {
    var onScroll, _this = this;
    opts = opts || {debounce: 100};

    if (opts.debounce) {
      onScroll = App.debounce(function() { return _this.scrolled(); }, 100);
    } else {
      onScroll = function(){ 
          return _this.scrolled(); 
      };
    }
    $(document).bind('touchmove', onScroll);
    $(window).bind('scroll', onScroll);
  },

  unbindScrolling: function() {
    $(window).unbind('scroll');
    $(document).unbind('touchmove');
  }

});

Você pode encontrar a versão original (no discurso github rebo) [ https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/mixins/scrolling.js ]

Related Posts