木偶能管理路線嗎？

我是新手Marionette（雖然不是Backbone），並決定用它來管理我的路由。假設我有以下情況：木偶能管理路線嗎？

var AppRouterController = { 
    //Route to the homepage 
    home: function() { 
    //Unload the existing route, and load this one instead 
    }, 
    //Route to a user profile page 
    user: function() { 
    //Unload the existing route, and load this one instead 
    }, 
    //Route to a list of tasks or something 
    tasks: function() { 
    //Unload the existing route, and load this one instead 
    }, 
}; 

var TheRouter = new Marionette.AppRouter({ 
    controller: new AppRouterController(), 
    appRoutes: { 
    "home": "home", 
    "user/:id": "user", 
    "tasks/:date": "tasks" 
    } 
});

我想爲我的應用程序動態地加載每一個新的途徑，並完全從DOM刪除其前身（很可能是通過一個動畫，其中，至少一點點，他們將共享屏幕空間）。我可以看到有兩個區域的我的應用程序：在「導航欄」和「內容」（其中從給定的路由信息被渲染的區域「）：

<html> 
    <body> 
    <section region="navbar"></section> 
    <section region="content" id="home|user|tasks|whateverRoute"></section> 
    </body> 
</html>

所以，我的DOM身體總是有兩個孩子們：navbar區域部分和內容區域部分，無論Marionette中的當前活動路線如何，在Marionette中管理這個過程的最佳方式是什麼？我的意思是，只有當他們在特定的路線上抓取模塊時（而不是在負載時抓取它們），創建一個新的「內容」區域，並以平滑的方式替換現有的「內容」區域。

來源

2014-10-08 AlexZ

使用App.content.show(yourViewInstance(params))並使用某種加載條在切換路線。示例：

var app = new Marinoette.Application.extend({ 
    showLoadingBar: function() {// your loadingBar logic here}, 
    hideLoadingBar: function() {// your loadingBar logic here}, 
    onRoute: function() { 
     this.showLoadingBar(); 
     // other things needed to be done here 
    } 
}); 

app.addRegions({ 
    navigation: "#navbar", 
    content: "#content" 
}); 

var AppRouterController = { 
    //Route to the homepage 
    home: function() { 
    //Unload the existing route, and load this one instead 
    // require app here to access regions via require.js or in other way. 
    app.content.show(yourHomeViewInstance(collection_or_model_or_other_param)); 
    app.hideLoadingBar(); 
    }, 
    //Route to a user profile page 
    user: function(id) { 
    //Unload the existing route, and load this one instead 
    app.content.show(yourUserViewInstance(collection_or_model_or_other_param)); 
    app.hideLoadingBar(); 
    }, 
    //Route to a list of tasks or something 
    tasks: function(date) { 
    //Unload the existing route, and load this one instead 
    app.content.show(yourTasksViewInstance(collection_or_model_or_other_param)); 
    app.hideLoadingBar(); 
    }, 
}; 

var TheRouter = new Marionette.AppRouter({ 
    controller: new AppRouterController(), 
    appRoutes: { 
    "home": "home", 
    "user/:id": "user", 
    "tasks/:date": "tasks" 
    } 
}); 

app.on('route', app.onRoute, app); 

app.on('start', function() { 
    Backbone.history.start(); 
}) 


app.start();

app.region.show將管理重新渲染（關閉舊視圖並附加新進程）進程。

任何時候你將導航地方Marionette.Router將觸發'route'事件，app.onRoute將被調用（Marionette.Router有它自己的onRoute方法可能是其他情況下非常有用）將管理LoadingBar功能（將顯示它），並在控制器的行動，視圖已顯示後，您將隱藏加載欄。

這可能是您的問題最簡單的樣板。希望它有幫助。

更新從服務器

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    //Head content here 
</head> 
<body> 
    <nav id="navbar"></nav> 
    <div id="content"></div> 
</body> 
</html>

Marionette.Application後已經開始，將「附加」的區域，然後你就可以管理該地區的意見。

來源

2014-10-08 08:06:00

相應的HTML文件會是什麼？在加載任何東西之前，我是否已經需要爲我的區域準備好html，或者是否有一種首選的方式來創建它們，然後從一個空的物體開始？ – AlexZ 2014-10-09 01:28:57

@AlexZ我已經更新了答案。 – 2014-10-09 06:43:43

啊，謝謝你。非常感激！ – AlexZ 2014-10-09 16:53:28

木偶能管理路線嗎？

回答

相關問題