12

バックボーン ビューの 1 つでサイズ変更イベントにハンドラーをアタッチしようとしています。いくつかの調査を行った後、ビューの要素またはその子孫にのみイベントを添付できることがわかりました。

私が達成しようとしている視覚効果は純粋な CSS では不可能であり、ウィンドウからヘッダー要素を引いたものに基づいてコンテンツ領域要素の寸法を設定するためにいくつかの JS が必要になるため、これは私にとって問題です。

私がやろうとしていることを視覚化するのに苦労している場合は、薄いヘッダーとコンテンツ領域が残りのスペースを占める必要があり、CSS の背景の策略がないことを想像してください。

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;
    }
);
4

2 に答える 2

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);
    }, ...

remove()ビューで関数を呼び出すことを忘れないでください。ビューを別のものに置き換えるだけではいけません。

于 2012-02-02T09:48:19.033 に答える
4

window.onresize にカスタムイベントをトリガーさせ、ビューまたはモデルにそれをリッスンさせて、さまざまな要素に対するカスタム応答を持たせることができます。

ケース 1.ビューはウィンドウ イベントを直接リッスンします。

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();

  }

ケース 2.必要になるたびに検査せずにウィンドウ サイズを保持したい場合があるため、ウィンドウ サイズをバックボーン モデルに格納します。この場合、ウィンドウ モデルはウィンドウをリッスンし、ビューはウィンドウ モデルをリッスンします。 :

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});

}
于 2013-09-09T10:39:57.330 に答える