在MarionetteJS

Question

我目前大規模應用骨幹的工作（使用marionetteJS），並具有參與切換視圖或更改「頁」的最佳實踐/模式的一些架構麻煩更改「頁」。

木偶的佈局&地區提供了一些非常好的視圖切換工具，如.show()和.empty()方法。在我正在處理的應用程序中，我使用佈局視圖作爲所有其他視圖的容器，這使我可以切換視圖進出，實質上是在應用程序內進行導航。

這很容易。對我而言，最難的部分是瞭解觸發這些變化的最佳做法。

這裏有一些我已經拿出瞭解決方案：

1. 當用戶點擊用戶界面的某一部分（x是切換到視圖）一個page:change:x事件。管理該視圖的控制器監聽該事件，並在應用程序主佈局視圖中顯示該事件。

2. 當用戶單擊ui更改頁面時，視圖會觸發一個命令，並在視圖中傳遞它希望UI更改的視圖，如App.execute('page:change', view)。應用程序對象偵聽該觸發器，並顯示傳遞到應用程序主佈局視圖的視圖。

與第一種方法的問題是，控制器必須知道在其範圍內的每個頁面（也許那不是一件壞事，我不知道）。例如：用戶列表視圖，用戶編輯視圖，用戶配置文件視圖等等。它也使得代碼難以跟蹤，因爲有事件在整個地方被觸發。

與第二種方法的問題是，目前看來有了解的觀點，即應用程序將改變過，這似乎並不十分擴展到我。

有沒有做這種事情任何的最佳做法？

編輯：

我要澄清，這是與應用程序中導航圍繞相關的問題。不是使用路由器的初始負載。

Answer 1

面對非常密切的問題幾次，我的解決方案是繼

1）主 - 在HTML頁面中唯一的腳本，負載應用+路由器+控制器 1）應用 - 確定根地區，開始歷史， 2 ）AppRouter - 監視URL匹配和呼叫控制器動作 3）AppController的 - 保持動作哈希，掛鉤事件訂閱（例如App：switchpage）用自己的行動，管理模型和視圖。

在代碼（一用於按需加載requireJS）：

主。JS

define(
    [ 
     'application', 
     'appRouter', 
     'appController' 
    ], 
    function(Application, Router, Controller) { 
     var App = new Application; 

     App.addInitializer(function() { 
      this.controller = App.Controller; 
      this.router = App.Router({ 
       controller: this.controller 
      }) 
     }) 
    } 
); 

應用

define(
    [ 
     'marionette', 
     'backbone' 
    ], 
    function(Marionette, Backbone) { 
     return Marionette.Application.extend({ 
      regions: { 
       'main': '#body' 
      }, 

      onStart: function() { 
       Backbone.history.start() 
      } 
     }) 
    } 
); 

appRouter

define(
    [ 
     'application' 
    ], 
    function(Application) { 

     Application.module('AppRouter', function(Module, App, Backbone, Marionette) { 
      App.Router = Marionette.AppRouter.extend({ 
       //for example : page/home page/goods page/user 
       appRouter: { 
        'page/*': 'switchPage' 
       } 
      }) 
     }) 
    } 
); 

AppController的

define(
    [ 
     'marionette' 
    ], 
    function(Marionette) { 

     Application.module('AppRouter', function(Module, App, Backbone, Marionette) { 
      App.Controller = Marionette.Controller.extend({ 
       switchPage: function(path) { 
       //path (user || home || some) 
        require(['views/'+path], function(pageView) { 
         App.main.show(new pageView) 
        }) 
       } 
      }) 
     }) 
    } 
); 

頁/家

define(
    [ 
     'marionette', 
     'underscore' 
    ], 
    function(Marionette, _) { 
     return Marionette.ItemView.extend({ 
      template: _.template("home page") 
     }) 
    } 
); 

它只是一個樣機，我已刪除的代碼某些部分，以保持應用程序的唯一的想法。爲了使其更具可擴展性，您可以將頁面定義爲具有自己的控件和代碼的模塊。

每晚建議您在http://www.backbonerails.com/結帳布賴恩·曼截屏，特別是Engineering Rich, Single Page Apps 和結算大衛Sulc GitHub上與project example