单击导航栏中的链接时,我试图在静态导航栏和页脚之间呈现动态内容,但是每次单击链接时,它都会复制包括导航栏和页脚的内容。我正在使用带有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中的导航栏。我假设这是因为路由器路由到的内容文件扩展了我的顶级文件。我一直在网上寻找答案,但找不到任何解决方案。
任何建议将不胜感激。
您自己说了“假设是因为内容文件...扩展了我的顶级文件”,从而给出了答案。@jraede是绝对正确的询问什么是加载阻止你的谐音。
全面了解:您的路线显然是在调用可呈现“经典”全页html响应的操作。因此,您的特定玉器模板可能会扩展“最顶层”的布局文件,如问题中引用的代码所示。这对于http://your-project.tld/ourteam
在浏览器中直接请求(例如说)很不错。
但是现在您只想呈现部分内容,并通过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请求进行查询ourteam-content
。
我希望它有助于将您推向正确的方向!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句