0

所以我正在构建一个简单的 node.js Web 应用程序。但我对单个 Web 应用程序的工作方式有点困惑。我现在没有在前端使用backboneMVC。这个概念是我在页面上有两个选项卡，即文件夹和列表。因此，我希望能够通过诸如host/folder/{folder-id}之类的静态 URL 来显示文件夹的内容，并对列表执行相同的操作。

如果我只是 res.render 带有参数的视图模板以响应 Restful 请求，这似乎很好。

但是当这两个在同一个页面上并且必须通过标签点击访问而不离开主页时，我很困惑。我可以通过使用带有 # 标签的前端路由来让它工作（所以你最终会得到host/index.html#/folder/{id}）

所以我想知道，有没有一种更简单的方法可以使用部分模板，我可以通过jade模板部分来切换主页的一部分，而无需离开index.html？

4

3 回答 3

2

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

我发现它比小型应用程序/站点的主干更容易理解。

于 2013-03-28T03:40:46.580 回答
0

您可能会查看资产机架。它有助于将静态内容推送到浏览器。

它可以将 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-28T14:31:36.693 回答
0

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

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

可能看起来像这样：在 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-28T04:48:21.740 回答