重新渲染調整大小的backbone.js視圖？

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