渲染服務器和客戶端上的Backbone.js應用程序

Question

假設我有一個使用Backbone.js和Handlebars構建的Web應用程序。作爲服務器，我正在使用Node.js.現在我想在兩端進行渲染，即在服務器和客戶端上進行渲染。

當請求路線的第一次，服務器應做渲染（主要由於性能原因）。之後，以下所有操作都將導致客戶端呈現。

這意味着，我必須能夠使客戶端和服務器上的任何頁面，兩次在完全同樣的方式。兩端必須支持相同的路線。

我怎麼能完成這項任務？目前，我已經看過AirBnb的rendr項目，但是這肯定會把我和Backbone.js聯繫起來（我不確定是否我想一直堅持使用Backbone.js），並且似乎尚未完美完成。至少AirBnb不推薦將其用於生產用途。

有關如何做到這一點的任何其他想法？

這樣子的問題，我也可能會問：什麼是共享服務器和客戶端之間的JavaScript代碼的首選方式？爲此，我也知道piler，但我可以想象，可能有更好的解決方案。

任何提示？

Answer 1

那麼，我正在構建一個這樣的應用程序。如果你不想使用rendr，你將不得不爲自己編寫的一些他們所關心的東西編寫代碼。 AFAIK在您的選擇是Rendr或本土的時刻。這裏有一些其他的小技巧。

• 我們使用cheerio服務器端的DOM操作，所以當欣賞到服務器上渲染，this.$el是cheerio元素實例。在瀏覽器中，它是jQuery。
• 您不需要在服務器端進行事件委託和綁定。我們的代碼在技術上做到這一點的時刻，但它是沒有意義的，更清潔的解決方案將避免在服務器上
• 一旦你在瀏覽器中的服務器渲染HTML，你需要一種方法來線了視圖實例的大嵌套樹到大嵌套DOM樹中的相應元素。我們對此有一個土生土長的解決方案，但Backbone.View.setElement是核心，你需要編寫一些代碼來實現這一目標
• 我們在瀏覽器重新呈現在目前雖然有可能採取一個巧妙方式一個視圖實例，在構造函數中給它一些選項，包括預渲染的DOM節點，並且在不重新渲染的情況下正確連接東西。儘管如此，這是一個練習。 :-)
• 我們也發下來，所以我們有兩個服務器渲染HTML（用於感知性能），我們需要爲JSON一個<script>標籤內的原始數據和原始數據可作爲JSON，所以我們可以得到我們的骨幹模型和視圖實例化和可操作性。再次，你將不得不拿出一些代碼來處理這種情況。
• 我們使用browserify在服務器和瀏覽器之間捆綁和共享代碼。我們所有的JavaScript都被編碼爲CommonJS模塊。
• 我們在我們的視圖父類中有一個基本的isBrowser()函數，所以我們知道何時只有瀏覽器的代碼才能運行事件綁定等。

無論如何，在這樣的方式工作了好幾個月之後，我認爲骨幹網並不適合這種範式。來自骨幹網的許多核心概念都很好，但它不適合將視圖實例映射到預渲染的DOM節點。從JSON引導模型和集合更容易，但視圖層可能需要一個重要的分支來以這種風格乾淨地操作。