如何处理单个页面的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应用程序的多个视图

回答

相关问题