Question

我尝试在单击导航栏中的链接时在静态导航栏和页脚之间呈现动态内容，但每次单击链接时，它都会复制内容，包括导航栏和页脚。我使用带有express的节点和jade模板引擎。

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

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中的导航栏。我假设它是因为路由器路由到的内容文件扩展了我的顶级文件。我一直在网上寻找答案而无法找到解决办法。

我们非常感谢任何建议。

Answer 1

你自己给出答案＆＃34; 假设它是因为内容文件...扩展我的顶级文件＆＃34;。 @jraede绝对正确地询问是什么阻止你加载 partials 。

全局了解：您的路线显然正在调用可以呈现＆＃34;经典＆＃34;整页HTML回复。因此，您的特定玉石模板可能会扩展最顶层的＃34;布局文件如您问题中引用的代码所示。这非常适合直接请求 - 让我们在您的浏览器中说http://your-project.tld/ourteam。

但是现在你想只渲染 partials 并通过ajax / xhr只传输这个部分html代码，最终只替换你#pageBody div中的html。实现此目的的一种方法是定义其他路由/操作和玉石模板。试试这个招数：

创建部分模板partials/ourteam-content.jade。
只在其中放入相关的内容（从ourteam.jade内的块内容复制），不要扩展您的主要布局，不要在这里使用块定义。
为了保持整洁，请修改原始ourteam.jade，并在块定义的正下方添加新创建的部分模板：
```
block content
  include patials/ourteam-content
```
定义另一个路线/操作并将其命名为/ourteam-content。
在app.get("ourteam-content", ...)上仅渲染您的partials/ourteam-content模板。
重新路由您的ajax请求＆＃34;我们的团队＆＃34;查询ourteam-content。

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

静态导航栏和节点js jade和ajax的页脚

1 个答案: