Question

所以我在这里有两个观点，它们的结构依赖于$(window).height()。因此，当我重新调整浏览器大小或使用控制台时，我需要计算高度。以下内容适用于我，但我没有看到任何一个提到这样做。

所以我想知道这段代码是可怕的，还是好的或好的。显然，我所做的就是告诉我的程序何时实例化我的观点。

// Play
$(document).ready(function() {
    intro = new App.Views.Intro();
    flight = new App.Views.Flight();
});
$(window).on('resize', function() {
    intro = new App.Views.Intro();
    flight = new App.Views.Flight();
});

不确定这是否符合指南，但我不希望这会在以后再次伤害我。

编辑：不确定为什么我没有想到这一点，但下面看起来很实用。我不想在视图中重新渲染的原因是因为我似乎必须添加remove()方法并“绑定”调整大小。如果你问我，不是很漂亮和有条理。例如How do I add a resize event to the window in a view using Backbone?

// Play
$(document).ready(function() {
    intro = new App.Views.Intro();
    flight = new App.Views.Flight();
});
$(window).on('resize', function() {
    intro.render();
    flight.render();    
});

Answer 1

您可以创建基本视图类来封装此行为。出于某些原因，这可能很有用。一个好处是您可以将resize行为与render代码分开。有时render会做更多的工作，例如序列化模型并重写dom的大部分内容，而你不想重新运行。

这里is a pen demonstrating a pattern我已经习惯了在初始渲染之后只调整了宽度/高度，你不需要重新渲染任何视图来简单地调整它们的大小。为方便起见，下面复制了代码。

这只是一个样本。在我可能正在调整一些视图的真实应用程序中，我通常会重构window.resize事件，因此我只会连接一个侦听器。

var ResizeView = Backbone.View.extend({
  template: '#view-tpl',

  initialize: function() {
    $(window).on('resize.resizeview', this.onResize.bind(this));
  },

  remove: function() {
    $(window).off('resize.resizeview');
    Backbone.View.prototype.remove.call(this);
  },

  render: function () {
    var $tmpl = $(this.template);
    var tmpl = _.template($tmpl.html());
    this.$el.append(tmpl());
    this.onResize();
    return this;
  },

  onResize: function () {
    var w = $(window).width()
      , h = $(window).height();
    console.log('resize', w, h);
    this.resize(w, h);
  },

  resize: function (w, h) {
    this.$el.css({
      'width': w,
      'height': h
    });
  }
});

var view = new ResizeView();
$('body').append(view.render().$el);

在resize上重新渲染backbone.js视图？

1 个答案: