带有nodejs jade和ajax的静态导航栏和页脚

我试图通过点击我的导航栏中的链接来呈现静态导航栏和页脚之间的dynamic内容，但每次点击链接时都会复制包含导航栏和页脚的内容。 我使用快递和玉模板引擎节点。

这是我的（简体）最顶级的玉文件。

doctype html html head title= title // { links } body block navbar #navLinks.nav.navbar-nav a(href='/', id='home') Home a(href='/ourteam', id='team') Our Team a(href='/blog', id='blog') Blog #pageBody block content block footer // { footer content } // { scripts } 

我的jQuery AJAX脚本：

 $('#navLinks').on('click', 'a', function(event) { event.preventDefault(); console.log("Hello world"); var url = $(this).attr('href'); updatePage(url); }); function updatePage(url) { var pageBody = $('#pageBody'); $.ajax({ type: 'GET', url: url, dataType: 'html' }).done(function(html) { console.log(html); pageBody.html(html); }); } 

问题是，只要我点击我的导航栏中的任何链接，它复制#pageBody div内的导航栏。 我假设这是因为内容文件的路由器路线来扩展我的顶级文件。 我一直在网上寻找答案，找不到任何解决办法。

任何build议将不胜感激。

Answer 1

你自己给出的答案是“ 假定是因为内容文件…扩展了我的顶级文件 ”。 @jraede绝对正确地问你是什么阻止你加载partials 。

获取大局：您的路线显然是调用“经典”整页html响应的动作。 因此，您的特定的玉模板可能会延长“最高”的布局文件，如您的问题中引用的代码所示。 这是很好的直接请求 – 让我们说你的浏览器中的http://your-project.tld/ourteam 。

但是现在你只想渲染partials ，只通过ajax / xhr传递这个部分html代码，最终只replace#pageBody div中的html。 实现这一目的的一种方法是定义其他路线/动作和玉石模板。 试试这个rec​​eipe：

1. 创buildpartials/ourteam-content.jade的部分模板。

2. 只把相关内容放在里面（从ourteam.jade里的块内容复制），不要扩展你的主布局，不要在这里使用块定义。

3. 为了保持干净，请修改原始的ourteam.jade ，并将新创build的部分模板包含在块定义的下方：

    block content include patials/ourteam-content 

4. 定义另一个路线/动作并将其命名为/ourteam-content 。

5. 在app.get("ourteam-content", ...)只呈现您的partials/ourteam-content模板。

6. 重新路由您的“我们的团队”的Ajax请求查询ourteam-content 。

我希望它有助于推动你走向正确的方向！