JavascriptMVC應用程序的概念設計

Question

我正在構建一個帶有「頁面內容」區域和主導航鏈接的單頁網站。點擊鏈接運行動畫並將內容（和html）加載到「頁面內容」區域。

我對MVC有一個體面的理解，但在javascriptMVC框架的上下文中，我有一個小問題設計我的應用程序。隨着我前進，我將添加很多JavaScript（和JavaScript動畫），所以我想給我的網站打好基礎。

• 我是否有一個模型（指數）包含的數據（和 HTML）我想補充燈具？

• 我有一個控制器的頁面（索引）與動作（動畫 然後數據從燈具加載）？

• 如何將每個鏈接指向一個動作？

基本上，我如何在概念設計使用javascriptMVC框架的頁面？

Answer 1

我現在正在爲我爲iPhone構建的PhoneGap應用程序做一個非常類似的事情。這是一個頁面的JavaScript應用程序。下面是我使用的基本架構：

1. 所有頁面的變化與正常<a href="/stuff/things/"></a>標籤來完成。 href是一個「有效的」href - 「/ stuff/things /」。

2. 我有一個對象，它將URL正則表達式映射到控制器。因此，像/recipes/\d+?/這樣的東西可以捕獲像/ recipes/10 /或/ recipes/5 /之類的任何URL，並調用指定的控制器。

3. 我將一個事件綁定到檢查鏈接點擊的文檔，並用我的各種正則表達式檢查鏈接的href屬性。如果有匹配，它會啓動一個「pagechange」。

4. pagechange函數使用history.pushState()來更改URL，然後將預設數據對象傳遞給控制器​​。該數據對象的一部分是一個匿名的「完整」函數，控制器在完成這件事情後將使用它。

5. 之所以在「完成」功能的傳遞往往是網頁變化包括異步活動，例如用Ajax查詢數據庫。它還允許我們在代碼的一部分中保留「pagechange」行爲，並且控制器僅有效構建出一塊html並將其附加到DOM。控制器在此處調用complete（）函數的傳遞，並且pagechange函數完成它的工作。

您可以查看我的框架的整體：http://eatery.decoratelife.net/eatery.js

這不是一個 「真正」 的MVC。因爲我沒有真正的模特或觀點。該視圖通過合併與類似鬍鬚JS HTML模板串數據對象處理，模特們通過API調用到遠程MongoDB中完成的。但我認爲這是一個體面的方式來解決你的問題的說明。