結合Require.js，Backbone.js和服務器端MVC框架

我們實際上正在計劃一個非常複雜的Web應用程序。至少爲了我自己的標準。在過去，我們一直使用服務器端MVC框架（Codeigniter）和客戶端功能（jQuery和插件）的組合。我們只是在我們的視圖中編寫了內聯JavaScript代碼。這個工作如預期，但當然有幾個缺點：結合Require.js，Backbone.js和服務器端MVC框架

沒有緩存
複製js代碼
可維護性的問題
...現在

我的主要目標是組織客戶端代碼採用高效且易於維護的方式。但是由於現有的知識和一些現有的接口，我想保持服務器端MVC。此外，我想用jQuery和「意大利麪代碼」減少複雜的DOM操作。

現在我想到了Backbone.js和Require.js的組合，但我真的找不到教程或關於如何將它們與服務器端MVC相結合的任何堅實的描述。它甚至推薦？

在我的舊應用程序我得到的文件結構是這樣的：

應用（笨）
資產
- JS
- CSS
- IMGS

是否有任何想法或最佳實踐？

謝謝！

來源

2012-11-13 Marcel Gwerder

我認爲Backbone是一個不錯的選擇，並且Require在這裏不是強制性的。

要求只會幫助你組織你的源代碼，並可能提高性能。我認爲你可以馬上開始使用Backbone，這將是你最常用的東西，並在後面添加Require。

關於Backbone，是的，它很容易使用它的模型與現有的MVC應用程序，只要它返回JSON。要加載您現有的數據，您將希望使用fetch方法合併到url以適應您現有的代碼或您自己的方法。

一般來說，請考慮在哪些視圖中顯示哪些模型。骨幹網可以幫助你這樣思考：我在由HTML製作的視圖中顯示的模型表示爲JSON數據。

另外，對於視圖層，重用您現有的HTML非常容易，因爲視圖不受任何約束，也沒有JavaScript模板或任何東西。

簡單的例子：

<div id="user"> 
    <span class="name">John</span> 
</div> 

var UserView = Backbone.View.extend({ 
    render: function() { 
     this.$el('.name').html(this.model.get('name')); 
    } 
}); 
var userView = new UserView({el: $('#user')[0], model: ...});

在這個例子中#user DIV反映User模型的狀態，它的名字。

另請檢查Backbone中的Todo App示例。

來源

2012-11-13 19:01:37 mexique1

THX。你將如何整合Backbone？例如，如果我有一個頁面（「服務器端」視圖）和幾個頁面元素（骨幹視圖）。是否可以在每個View/Model/Collection中使用文件，而無需在頁面中手動輸入每個文件。 Backbone中是否有一些功能允許您自動加載所有相應的元素？ –

當然，您可以在不同的文件中定義每個模型/視圖/集合，並且您應該明確地做到這一點，但手動或在一個文件中添加它們可以直接使用，並且您可以添加Require來稍後實現代碼行。讓它工作，做對。 – mexique1

我將Backbone與現有的MVC後端集成在一起，一旦停止將服務器端代碼視爲MVC並更像API，它就變得更加容易。您正在將MVC屬性委託給您的前端;骨幹現在將處理這些方面。 –

要添加到mexique1的建議，可能值得看看backbone-boilerplate project。它應該爲您正在考慮的許多問題提供最佳實踐解決方案，例如需求和骨幹的組合，項目客戶端的組織以及減少複雜的DOM操作（請參閱模板）。

正如您所預料的那樣，挑戰很可能是將樣板模式與您習慣的方法相結合。但是，它幾乎肯定值得付出，因爲它應該爲您和今後的項目提供堅實的基礎。

來源

2012-11-13 23:49:43

Backbone樣板項目看起來很棒！ – mexique1

結合Require.js，Backbone.js和服務器端MVC框架

回答

相關問題