Comment ajouter un événement de redimensionnement à la fenêtre dans une vue à l'aide de Backbone?

J'ai essayé de joindre un gestionnaire à l'événement de redimensionnement dans un de mes épine Dorsale de vues. Après avoir fait quelques recherches, j'ai découvert que vous ne pouvez associer des événements à la vue de l'élément ou de ses descendants.

C'est un problème pour moi parce que l'effet visuel que je suis en train de réaliser n'est pas possible à l'aide de pure CSS et exige un peu de JS pour définir les dimensions de la zone de contenu de l'élément en fonction de la fenêtre, moins l'élément d'en-tête.

Si vous éprouvez des difficultés à visualiser ce que je suis en train de faire, imaginer une mince en-tête et d'une zone de contenu qui doivent occuper l'espace restant avec aucun fond de CSS ruse 😉

J'ai joint un exemple de code. Si vous avez d'autres pointeurs j'aimerais également entendre!

define(
    [
        'jQuery',
        'Underscore',
        'Backbone',
        'Mustache',
        'text!src/common/resource/html/base.html'
    ],
    function ($, _, Backbone, Mustache, baseTemplate) {
        var BaseView = Backbone.View.extend({

            el: $('body'),

            events: {
                'resize window': 'resize'
            },

            render: function () {
                var data = {};

                var render = Mustache.render(baseTemplate, data);

                this.$el.html(render);

                this.resize();
            },

            resize: function () {
                var windowHeight = $(window).height();

                var headerHeight = this.$el.find('#header').height();

                this.$el.find('#application').height( windowHeight - headerHeight );
            }
        });

        return new BaseView;
    }
);

Toute aide serait grandement appréciée par mon visage.

Merci,
Alex

source d'informationauteur Alex Tworowsky

  1. 25
    var BaseView = Backbone.View.extend({

    el: $('body'),

    initialize: function() {
        //bind to the namespaced (for easier unbinding) event
        //in jQuery 1.7+ use .on(...)
        $(window).bind("resize.app", _.bind(this.resize, this));
    },

    remove: function() {
        //unbind the namespaced event (to prevent accidentally unbinding some
        //other resize events from other code in your app
        //in jQuery 1.7+ use .off(...)
        $(window).unbind("resize.app");

        //don't forget to call the original remove() function
        Backbone.View.prototype.remove.call(this);
        //could also be written as:
        //this.constructor.__super__.remove.call(this);
    }, ...

    N'oubliez pas d'appeler la remove() fonction de la vue. Jamais il suffit de remplacer la vue avec un autre.

  2. 4

    Vous permettra peut-être de la fenêtre.onresize déclencher une custom backbone.js événement, puis laissez-les Vues ou les Modèles écouter que pour avoir des réponses personnalisées pour les différents éléments.

    Cas 1. Une vue à l'écoute de la fenêtre d'événement directement.

    window.onload = function() {

  _.extend(window, Backbone.Events);
  window.onresize = function() { window.trigger('resize') };

  ViewDirect = Backbone.View.extend({

    initialize: function() {
      this.listenTo(window, 'resize', _.debounce(this.print));
    },

    print: function() {
      console.log('Window width, heigth: %s, %s',
        window.innerWidth,
        window.innerHeight);
    },

  });

  var myview = new ViewDirect();

  }

    Cas 2. Vous pouvez conserver la taille de la fenêtre sans l'inspecter chaque fois que vous en avez besoin, où vous stocker la taille de la fenêtre dans un backbone modèle: dans ce cas, le modèle de la fenêtre de l'écoute de la fenêtre, tandis que la vue est à l'écoute de la fenêtre modèle:

    window.onload = function() {

  _.extend(window, Backbone.Events);
  window.onresize = function() { window.trigger('resize') };

  WindowModel = Backbone.Model.extend({

    initialize: function() {
      this.set_size();
      this.listenTo(window, 'resize', _.debounce(this.set_size));
    },

    set_size: function() {
      this.set({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

  });

  ViewWithModel = Backbone.View.extend({

    initialize: function() {
      this.listenTo(this.model, 'change', this.print);
      ...
    },

    print: function() {
      console.log('Window width, heigth: %s, %s',
        this.model.width,
        this.model.height);
    },
  });

  var window_model = new WindowModel();
  var myview = new ViewWithModel({model: window_model});

}