如何處理單個頁面的Web應用程序的多個視圖

所以我正在構建一個簡單的node.js Web應用程序。但我有點卡在單個Web應用程序應該如何工作。現在我暫時還沒有使用backboneMVC。概念是我在頁面上有兩個選項卡，即文件夾和列表。因此，我希望能夠通過寧靜的URL顯示文件夾的內容，例如主機/文件夾/ {文件夾ID}，併爲列表執行相同操作。如何處理單個頁面的Web應用程序的多個視圖

這似乎很好，如果我res.render視圖模板的參數響應Restful請求。

但我很困惑，當這兩個人在同一頁面上，必須通過標籤點擊訪問而無需離開主頁。我也許能得到它通過使用前端帶有＃標籤路由工作（所以你最終主機/ index.html的＃/文件夾/ {ID}）

所以我想，有一個更簡單的方法與部分模板，我可以切換進入和通過玉模板partials主頁的一部分，而不會離開index.html？

來源

2013-03-25 ttback

您可能希望查看Page.js，以便在單頁應用中加載模板（http://github.com/visionmedia/page.js），它也來自Visionmedia，與製作Jade的人相同。

我發現比小型應用程序/站點的骨幹更容易理解。

來源

2013-03-28 03:40:46 1ManStartup

*個人Visionmedia只是他的手柄。 – generalhenry 2013-03-28 07:39:10

謝謝，會檢查出來 – ttback 2013-03-31 20:54:46

我還沒有嘗試過直接渲染偏好，但如果我理解你的問題，你可以做這樣的事情嗎？

創建視圖以生成部分輸出。使用路線爲您提供端點來抓取它們。從您的網站觸發一些JavaScript來替換 - 使用該端點輸出的塊。

可能是這個樣子：在routes.js：

app.get('/folder/:id', folders.show)

在控制器/ folders.js：

exports.create = function (req,res){ 
    res.render('folders/partial') 
}

在文件夾中

/show.jade：

button#tab1 
.tab 
    .result

然後用一些簡單的jquery替換你的站點上的內容以形成部分內容：

$('#tab1').click(function() { 
    $.get('/folder/:id', function(data) { 
    $('.result').html(data); 
    }) 
})

來源

2013-03-28 04:48:21

是的，這是我心中所想，從ajax結果建立HTML的種類，應該肯定，但我是如果有一種我不知道的「玉」的方式的話。我認爲它接近於布拉德回答的上面，如果它看起來有效。 Page.js似乎也更接近快速堆棧。 – ttback 2013-03-31 20:58:01

您可能會看到asset-rack。它有助於將靜態內容推送到瀏覽器。

它可以將jade模板預編譯爲JavaScript函數，然後您可以在客戶端上進行渲染。語法很簡單：

new JadeAsset({ 
    url: '/templates.js', 
    dirname: './templates' 
});

所以，如果你的模板目錄是這樣的：

index.jade 
contact.jade 
user/ 
    profile.jade 
    info.jade

然後引用客戶這樣對您的模板：

$('body').append(Templates['index']()); 
$('body').append(Templates['user/profile']({username: 'brad', status: 'fun'})); 
$('body').append(Templates['user/info']());

這裏有一個鏈接：

http://asset-rack.org

來源

2013-03-28 14:31:36

如何處理單個頁面的Web應用程序的多個視圖

回答

相關問題