javascript 就地編輯界面的mvc框架設計實踐

Question

我正在編寫一個 CMS，它允許以所見即所得的方式在網站上創建和編輯元素（內容塊）。 基本上，登錄后，您會在視覺上看到同一個網站，但是懸停並單擊元素會顯示編輯器（如 Aloha）或其他控件。

例如：

• 懸停段落將在其側面顯示一個小菜單，允許在左、中和右之間進行選擇 alignment
• 單擊段落將使其可編輯
• 將鼠標懸停在圖像上會在圖像右側顯示一個點，可以拖動它從而改變圖像的寬度（高度會按比例更新）
• 懸停在網站中的任何塊會彈出一個“+”按鈕，允許在懸停塊之前創建另一個塊。
• 等等

我目前的策略是使用我在Nike Better World上看到並一直使用的類似技術：有一個實例化 javascript，它在每個 ZFC35FDC70D5FC69D269883A822C7A 上調用 jquery 插件，插件的名稱是 data-controller 屬性的3個元素由數據控制器屬性指定。

稍微擴展這個概念，我將使用它將各種控件附加到內容塊。

但是，作為一個菜鳥，直到最近我才遇到 javascript mvc 框架，例如 backbone.js。 我一直在服務器端（在 Kohana 中）使用 MVC，但從未在 javascript 中使用。 似乎我可以使用它，但我不清楚，策略是什么。 我正在開發的 CMS 是適當的 javascript 應用程序和老式 html 網站之間的一種混合體。 我不明白，我如何使用，例如，backbone.js 的集合 object 用於內容塊，如果它們已經加載到頁面 html 中（這對我來說用 javascript 加載它們沒有意義）。

有人有什么建議嗎？

Answer 1

快速回答：

ContentModel：這是您要編輯的數據項。 實際內容。 例如： $(#mydiv).text();

DisplayView：將顯示此數據的視圖（這是 ContentModel 首次實例化並使用$('#mydiv).text()初始化的地方

EditView：“編輯”此數據的視圖（可能是文本區域） - 創建時，使用 ContentModel 初始化（相同的 model 對象）

EditTemplate：相應的 html 的“如何”編輯框應該看起來像（可以使用_.template(...)填充和創建，即文本區域/框等，

現在 DisplayView 在初始化時保存文本的當前值（在它的模型中）。 如果您在此視圖上有一個“編輯”按鈕/鏈接（例如 div 塊），單擊它會創建一個新的 EditView 並只是“隱藏”當前顯示文本的 div (#mydiv) 並顯示加載的 EditView model 數據在它的位置（ $.append()是你最好的朋友）。

您單擊取消，只需隱藏/刪除 EditView 並顯示底層 div。 如果您更新，成功時（從服務器）只需隱藏 EditView 並在 DisplayView 上顯示數據，DisplayView 可以訂閱模型的“更改”事件！ 所以一旦 model 發生變化，視圖就知道該怎么做了！！

希望這可以幫助！