Backbone.js Marionette路由器和嵌套視圖

Question

我正在潛入整個「單頁應用程序」和Backbone.js（特別是木偶）的東西。我正在研究一個體面複雜的應用程序。我想知道如何設置路由器來處理嵌套視圖，以便「包含視圖」也被渲染。例如，假設我有一個管理員部分，並且我有一個用戶部分。在用戶下我有選項卡「添加用戶」和「搜索用戶」。

如果我選擇了「添加用戶」，我想我的URL有片段「＃admin/users/add」。這將路由到具有添加用戶表單的視圖。但是，如果您直接轉到該網址，我想再次顯示該表單，而且還會突出顯示「管理員」的頂部導航欄，具有管理員導航的管理員專用側欄並突出顯示「用戶」按鈕。我需要整個HTML頁面，而不僅僅是添加用戶項目視圖。

如何在頁面首次加載時進行說明（刷新或從書籤中），加載html結構和「父視圖」？謝謝！

Answer 1

這是你需要考慮應用程序的行爲方式：

• 控制器需要創建視圖實例，並傳遞他們需要（機型，集合等）的數據，然後顯示該地區
• 路由器做的唯一事情就是內的意見是一致的URL到一個控制器動作（即「如果這個URL在地址欄中輸入，應用程序應該啓動該控制器操作」）

所以bascially，這是你的問題：你想念g控制器動作（例如， MyApp.AdminApp.Users.New.newUser()它將呈現你想要的視圖，然後你可以從你的路由器調用...）

有一件事有幫助（雖然與你目前面臨的問題無關），總是調用navigate方法與trigger: false（這是默認值）。這可確保您的應用程序正常運行，並且路由器僅限於將URL與控制器操作進行匹配。

關於菜單（使用突出顯示的當前條目），我將使它成爲一個單獨的Marionette模塊（https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.module.md），並有一系列模型（不保存在服務器上）來列出菜單條目。這樣，您可以通過將其模型active屬性設置爲true（並在視圖中檢查該屬性以突出顯示當前條目）來管理當前條目。

這可能是很多最初參加，但幾個小時木偶的工作後，將全部意義......

（無恥插頭：我正在寫一本關於那個木偶從初學者到完全獨立於Marionette，在這裏我將介紹這種類型的功能，特別是菜單管理以及如何突出顯示當前選項，如果你想查看它，在http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf頁樣本和書（這是仍然被寫入）爲https://leanpub.com/marionette-gentle-introduction）

Answer 2

我前段時間有同樣的問題，我強烈建議參與到Marionette佈局，集合，合成和集合視圖，區域以及如何在模板中顯示內容。

當你繼續閱讀教程並不難，我推薦閱讀lostechis.com，這是一個非常有教育意義的博客，來自Marionette的創造者Derick Bailey，也是木偶官方網站。

這只是關於教育自己做測試，當一些問題進入你的思想搜索它，如果沒有發現不要懷疑在這裏問它。

對於側欄和其他一些東西，您可以使用JQuery-ui或Twitter引導程序，將它們與主幹/牽線木偶視圖集成起來非常簡單，但您只需閱讀即可實現。

你好運。