Question

所以我正在构建一个简单的node.js Web应用程序。但是我对单个网络应用程序应该如何运作有点困惑。我现在不在fornt端使用backboneMVC。这个概念是我在页面上有两个选项卡，即文件夹和列表。所以我希望能够通过一个宁静的URL显示文件夹的内容，例如 host / folder / {folder-id} ，并对列表执行相同的操作。

如果我只是使用参数重新调用View模板以响应Restful请求，那似乎没问题。

但我很困惑，当这两个在同一页面上时，必须通过标签点击进行访问，而无需离开主页。我可以通过使用带＃标签的前端路由来使其工作（因此您最终使用 host / index.html＃/ folder / {id} ）

所以我想知道，是否有更简单的部分模板方式，我可以通过jade模板部分切换进出主页的一部分，而不必离开index.html？

Answer 1

您可能想要查看Page.js以在单页应用中加载模板，（http://github.com/visionmedia/page.js）它也来自Visionmedia，与制作Jade的人相同。

我发现比小型应用/网站的骨干更容易理解。

Answer 2

我之前没有尝试直接渲染局部，但如果我理解你的问题，你可以做这样的事吗？

创建视图以生成部分输出。使用路由为您提供端点以从中获取它们。从您的站点触发一些javascript来替换-say-一个块与该端点的输出。

看起来像这样：在routes.js中：

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

在controllers / 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);
  })
})

Answer 3

您可以查看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

如何处理单页Web应用程序的多个视图

3 个答案: