Javascript Mustach正在用空字符串替换我的标签 问题
（自从发布这篇文章以来，我已经离解决它有点近了，但我仍然被卡住了。请检查问题末尾的更新） 我有一个使用Mustache.js创建模板的网站。当站点在本地运行时，它工作正常。加载模板后，Mustach用给定的数据替换Mustach标记，页面按预期呈现 然而，当网站从我的（学校）服务器运行时，它会出现一个奇怪的问题。无论出于何种原因，Javascript Mustach正在用空字符串替换我的标签 问题,javascript,jquery,html,mustache,Javascript,Jquery,Html,Mustache,（自从发布这篇文章以来，我已经离解决它有点近了，但我仍然被卡住了。请检查问题末尾的更新） 我有一个使用Mustache.js创建模板的网站。当站点在本地运行时，它工作正常。加载模板后，Mustach用给定的数据替换Mustach标记，页面按预期呈现 然而，当网站从我的（学校）服务器运行时，它会出现一个奇怪的问题。无论出于何种原因，Mustache.render正在将我的模板中的所有Mustache标记全部替换为空字符串。显然，这是导致我的网站加载非常错误 我试着去诊断它 使用控制台日志记录，我跟
Mustache.renderData:
{
"headerClasses": "mainHeader",
headerTitle: "Uromastyces Fact Site",
"sideBarClasses": "mainSideBar",
"sideBarImgClasses": "sideBarImage",
"sideBarImgAlt": "A Picture of Pascal",
"sideBarImgSrc": "../images/pascal-cropped-shrunk.jpg",
"navBarClassNames": "navBar",
"navLinks": [
{
"name": "Home",
"link": "index.html"
}, {
"name": "Enclosure",
"link": "enclosure.html"
}, {
"name": "Diet",
"link": "diet.html"
}, {
"name": "Behavior and Life",
"link": "behaviorAndLife.html"
}, {
"name": "About Me",
"link": "aboutMe.html"
}
],
"uniqueBodyClasses": "uniqueBody",
"uniqueBodyContent": "DEFAULT UNIQUE BODY",
"footerClasses": "mainFooter",
"authorWrapperClasses": "footerAuthor footerWrapper",
"dateModifiedWrapperClasses": "footerModified footerWrapper",
"authorName": "Brendon Williams",
"lastModifiedDate": "DEFAULT LAST MODIFIED DATE",
"indexNavBarClasses": "indexNavBar"
}
templateLoader.js (41,14)
Body Template:
<header class="{{headerClasses}}">
<h1>
{{headerTitle}}
</h1>
</header>
<aside class="{{sideBarClasses}}">
<img class="{{sideBarImgClasses}}" src="{{sideBarImgSrc}}" alt="{{sideBarImgAlt}}">
<nav class="{{navBarClassNames}}">
<ul>
{{#navLinks}}
<li><a href="{{link}}" tabindex="1">{{name}}</a></li>
{{/navLinks}}
</ul>
</nav>
</aside>
<section class="{{uniqueBodyClasses}}">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
{{> uniqueBodyContent}}
</section>
<footer class="{{footerClasses}}">
<span class="{{authorWrapperClasses}}">
Author: {{authorName}}
</span>
<span class="{{dateModifiedWrapperClasses}}">
Last Modified: {{> lastModifiedDate}}
</span>
</footer>
<script src="./js/Indexer.js"></script>
templateLoader.js (42,14)
Article Template:
<section>
{{> articleBody}}
</section>
templateLoader.js (43,14)
Article Template:
<section>
{{> articleBody}}
</section>
templateLoader.js (43,14)
Rendered Article Body:
<section>
<header class="">
<h1>
</h1>
</header>
<aside class="">
<img class="" src="" alt="">
<nav class="">
<ul>
</ul>
</nav>
</aside>
<section class="">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
<h4>Introduction</h4>
<h5>Hi, I'm Brendon, and I'm a long-time reptile and Uromastyx owner.</h5>
<p>
I created this site to act as a centralized collection of facts on Uromastyces. The conditions that Uromastyces should be housed in are quite different than most other reptiles, so it can be confusing to new owners as to what the correct conditions are, and what they can be fed.
</p>
<p>
To the best of my ability, I will reference external sites and provide links to the original information. Note though that new information about Uromastyces may come to light after the publication of this site, so I can't guarantee that this information will forever remain in-date, and that contradictory information won't appear later; although I'll do my best to evaluate all of the sources I use.
</p>
<p>
In the top-left of every page is my current Uromastyx, <em>Pascal</em>. She was injured in-transit on the way to my Dad's wholesale warehouse (her right eye was damaged) and was deemed unsellable, so I adopted her to ensure that she can still live a long-life. Besides her lack-of a left eye, she's so healthy, you'd never know that she's injured (except when she
walks in circles looking for food).
</p>
<h4>Contact Me</h4>
<p>
Want to send me a message? Use the form below:
</p>
<form enctype="text/plain" method="post" action="mailto:brendonw5@gmail.com">
<label class="contactLabel">Subject:</label>
<input class="contactInput" type="text" name="subject">
<label class="contactLabel">Body:</label>
<input class="contactInput" type="text" name="body">
<input type="submit" name="submit" value="Submit">
</form>
</section>
<footer class="">
<span class="">
Author:
</span>
<span class="">
Last Modified: 15.12.26
</span>
</footer>
<script src="./js/Indexer.js"></script></section>
templateLoader.js (45,14)
Templates Loaded.
templateLoader.js (51,14)
数据：
{
“headerClasses”：“mainHeader”，
标题：“Uromastyes事实网站”，
“侧边栏类”：“主侧边栏”，
“SideBarimgClass”：“sideBarImage”，
“sideBarImgAlt”：“帕斯卡的照片”，
“sideBarImgSrc”：“./images/pascal crapped shresk.jpg”，
“navBarClassNames”：“navBar”，
“导航链接”：[
{
“姓名”：“家”，
“链接”：“index.html”
}, {
“名称”：“附件”，
“链接”：“enclosure.html”
}, {
“名称”：“饮食”，
“链接”：“diet.html”
}, {
“名称”：“行为与生活”，
“链接”：“behaviorAndLife.html”
}, {
“姓名”：“关于我”，
“链接”：“aboutMe.html”
}
],
“uniqueBody类”：“uniqueBody”，
“uniqueBodyContent”：“默认唯一正文”，
“footerClasses”：“mainFooter”，
“authorWrapperClasses”：“footerAuthor footerWrapper”，
“DateModifiedRapperClasses”：“footerModified footerWrapper”，
“authorName”：“Brendon Williams”，
“lastModifiedDate”：“默认上次修改日期”，
“indexNavBarClasses”：“indexNavBar”
}
templateLoader.js（41,14）
主体模板：
{{headerTitle}}
{{/navLinks}
{{>uniqueBodyContent}
作者：{{authorName}
上次修改：{{>lastModifiedDate}
templateLoader.js（42,14）
文章模板：
{{>articleBody}
templateLoader.js（43,14）
文章模板：
{{>articleBody}
templateLoader.js（43,14）
第条正文：
因此，问题似乎在于服务器端没有正确读取data.json
我应该注意，在本地，我使用的是Windows，但学校服务器是“Apache/2.2.3（Red Hat）”（根据Edge的网络选项卡）。为了遵守Unix标准，我将返回值从\r\n
更改为\n
，但它没有改变任何内容
我已经通过所有顶级JSON验证器运行了JSON文件，并且它在所有这些验证器中都签出，因此它似乎不是一个格式问题。看起来您没有解析来自AJAX响应的JSON数据。该文档以纯文本形式读取。（查看您的数据变量。）
您可以使用或jQuery的AJAX速记。为什么它可以在本地工作而不能远程工作？不过我会试试看。谢谢。我猜你的远程服务器没有提供正确的内容类型头。你看到我的JSON文件有什么问题吗？我收到一个“无效字符”错误，但没有关于哪个字符无效的信息。我已经通过在线验证器和Webstorm的验证器运行了它，并且它被检查出来了<代码>意外令牌otypeof对象字符串<header class="{{headerClasses}}">
<h1>
{{headerTitle}}
</h1>
</header>
<aside class="{{sideBarClasses}}">
<img class="{{sideBarImgClasses}}" src="{{sideBarImgSrc}}" alt="{{sideBarImgAlt}}">
<nav class="{{navBarClassNames}}">
<ul>
{{#navLinks}}
<li><a href="{{link}}" tabindex="1">{{name}}</a></li>
{{/navLinks}}
</ul>
</nav>
</aside>
<section class="{{uniqueBodyClasses}}">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
{{> uniqueBodyContent}}
</section>
<footer class="{{footerClasses}}">
<span class="{{authorWrapperClasses}}">
Author: {{authorName}}
</span>
<span class="{{dateModifiedWrapperClasses}}">
Last Modified: {{> lastModifiedDate}}
</span>
</footer>
<script src="./js/Indexer.js"></script>
<header class="mainHeader">
<h1>
Uromastyces Fact Site
</h1>
</header>
<aside class="mainSideBar">
<img class="sideBarImage" src="../images/pascal-cropped-shrunk.jpg" alt="A Picture of Pascal">
<nav class="navBar">
<ul>
<li><a href="index.html" tabindex="1">Home</a></li>
<li><a href="enclosure.html" tabindex="1">Enclosure</a></li>
<li><a href="diet.html" tabindex="1">Diet</a></li>
<li><a href="behaviorAndLife.html" tabindex="1">Behavior and Life</a></li>
<li><a href="aboutMe.html" tabindex="1">About Me</a></li>
</ul>
</nav>
</aside>
<section class="uniqueBody">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
<h4>Introduction</h4>
<h5>Hi...</h5>
<p>
I created this site to...
</p>
<p>
...
</p>
<p>
...
</p>
<h4>Contact Me</h4>
<p>
Want to send me a message? Use the form below:
</p>
<form enctype="text/plain" method="post" action="mailto:brendonw5@gmail.com">
<label class="contactLabel">Subject:</label>
<input class="contactInput" type="text" name="subject">
<label class="contactLabel">Body:</label>
<input class="contactInput" type="text" name="body">
<input type="submit" name="submit" value="Submit">
</form>
</section>
<footer class="mainFooter">
<span class="footerAuthor footerWrapper">
Author: Brendon Williams
</span>
<span class="footerModified footerWrapper">
Last Modified: 15.12.26
</span>
</footer>
<script src="./js/Indexer.js"></script>
<header class="">
<h1>
</h1>
</header>
<aside class="">
<img class="" src="" alt="">
<nav class="">
<ul>
</ul>
</nav>
</aside>
<section class="">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
<h4>Introduction</h4>
<h5>Hi...</h5>
<p>
I created this site to...
</p>
<p>
...
</p>
<p>
...
</p>
<h4>Contact Me</h4>
<p>
Want to send me a message? Use the form below:
</p>
<form enctype="text/plain" method="post" action="mailto:brendonw5@gmail.com">
<label class="contactLabel">Subject:</label>
<input class="contactInput" type="text" name="subject">
<label class="contactLabel">Body:</label>
<input class="contactInput" type="text" name="body">
<input type="submit" name="submit" value="Submit">
</form>
</section>
<footer class="">
<span class="">
Author:
</span>
<span class="">
Last Modified: 15.12.26
</span>
</footer>
<script src="./js/Indexer.js"></script>
var TemplateLoader = {
/**
* Draws the templated page, along with the given unique body.
*
* @param {string|Node} uniqueBodyElement Data representing the unique body to display. Should either be a string
* of HTML, or a DOM element containing the HTML.
* @param {string} lastModifiedDate The date that the page was last modified.
*/
renderPage: function(uniqueBodyElement, lastModifiedDate) {
var data;
var headTemplate;
var bodyTemplate;
var articleTemplate;
//Wait until all data is available
$.when(
$.get("./templates/siteData.json", function(d){ data = d }),
$.get("./templates/HeadTemplate.mustache", function(hT){ headTemplate = hT }),
$.get("./templates/BodyTemplate.mustache", function(bT){ bodyTemplate = bT }),
$.get("./templates/ArticleTemplate.mustache", function(aT){ articleTemplate = aT })
).done(function() {
Helpers.doWithMustache(function() {
var partial = TemplateLoader.getTemplatePartial(uniqueBodyElement);
partial.lastModifiedDate = lastModifiedDate;
var renderedHead = Mustache.render(headTemplate, data);
var renderedBody = Mustache.render(bodyTemplate, data, partial);
var renderedArticleBody = Mustache.render(articleTemplate, {}, { articleBody: renderedBody });
console.group();
console.log("Data: \n" + data);
console.log("Body Template: \n" + bodyTemplate);
console.log("Article Template: \n" + articleTemplate);
console.log("Rendered Body: \n" + renderedBody);
console.log("Rendered Article Body: \n" + renderedArticleBody);
console.groupEnd();
$('head').append(renderedHead);
$('body').html(renderedArticleBody);
console.log("Templates Loaded.");
});
}).fail(function() {
console.error("Failed to fetch templates or site data.")
});
},
getTemplatePartial: function(templateData) {
var uniqueBodyString;
if (typeof templateData === "string") {
uniqueBodyString = templateData
} else {
uniqueBodyString = templateData.innerHTML;
}
return {
uniqueBodyContent: uniqueBodyString
};
}
};
var Helpers = {
doWithMustache: function(f) {
$.getScript("./js/mustache.min.js", function() {
f();
}).fail(function() {
console.error("Failed to fetch mustache script.")
});
}
};
Data:
{
"headerClasses": "mainHeader",
headerTitle: "Uromastyces Fact Site",
"sideBarClasses": "mainSideBar",
"sideBarImgClasses": "sideBarImage",
"sideBarImgAlt": "A Picture of Pascal",
"sideBarImgSrc": "../images/pascal-cropped-shrunk.jpg",
"navBarClassNames": "navBar",
"navLinks": [
{
"name": "Home",
"link": "index.html"
}, {
"name": "Enclosure",
"link": "enclosure.html"
}, {
"name": "Diet",
"link": "diet.html"
}, {
"name": "Behavior and Life",
"link": "behaviorAndLife.html"
}, {
"name": "About Me",
"link": "aboutMe.html"
}
],
"uniqueBodyClasses": "uniqueBody",
"uniqueBodyContent": "DEFAULT UNIQUE BODY",
"footerClasses": "mainFooter",
"authorWrapperClasses": "footerAuthor footerWrapper",
"dateModifiedWrapperClasses": "footerModified footerWrapper",
"authorName": "Brendon Williams",
"lastModifiedDate": "DEFAULT LAST MODIFIED DATE",
"indexNavBarClasses": "indexNavBar"
}
templateLoader.js (41,14)
Body Template:
<header class="{{headerClasses}}">
<h1>
{{headerTitle}}
</h1>
</header>
<aside class="{{sideBarClasses}}">
<img class="{{sideBarImgClasses}}" src="{{sideBarImgSrc}}" alt="{{sideBarImgAlt}}">
<nav class="{{navBarClassNames}}">
<ul>
{{#navLinks}}
<li><a href="{{link}}" tabindex="1">{{name}}</a></li>
{{/navLinks}}
</ul>
</nav>
</aside>
<section class="{{uniqueBodyClasses}}">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
{{> uniqueBodyContent}}
</section>
<footer class="{{footerClasses}}">
<span class="{{authorWrapperClasses}}">
Author: {{authorName}}
</span>
<span class="{{dateModifiedWrapperClasses}}">
Last Modified: {{> lastModifiedDate}}
</span>
</footer>
<script src="./js/Indexer.js"></script>
templateLoader.js (42,14)
Article Template:
<section>
{{> articleBody}}
</section>
templateLoader.js (43,14)
Article Template:
<section>
{{> articleBody}}
</section>
templateLoader.js (43,14)
Rendered Article Body:
<section>
<header class="">
<h1>
</h1>
</header>
<aside class="">
<img class="" src="" alt="">
<nav class="">
<ul>
</ul>
</nav>
</aside>
<section class="">
<div id="indexDiv">
<div id="indexContents"></div>
</div>
<h4>Introduction</h4>
<h5>Hi, I'm Brendon, and I'm a long-time reptile and Uromastyx owner.</h5>
<p>
I created this site to act as a centralized collection of facts on Uromastyces. The conditions that Uromastyces should be housed in are quite different than most other reptiles, so it can be confusing to new owners as to what the correct conditions are, and what they can be fed.
</p>
<p>
To the best of my ability, I will reference external sites and provide links to the original information. Note though that new information about Uromastyces may come to light after the publication of this site, so I can't guarantee that this information will forever remain in-date, and that contradictory information won't appear later; although I'll do my best to evaluate all of the sources I use.
</p>
<p>
In the top-left of every page is my current Uromastyx, <em>Pascal</em>. She was injured in-transit on the way to my Dad's wholesale warehouse (her right eye was damaged) and was deemed unsellable, so I adopted her to ensure that she can still live a long-life. Besides her lack-of a left eye, she's so healthy, you'd never know that she's injured (except when she
walks in circles looking for food).
</p>
<h4>Contact Me</h4>
<p>
Want to send me a message? Use the form below:
</p>
<form enctype="text/plain" method="post" action="mailto:brendonw5@gmail.com">
<label class="contactLabel">Subject:</label>
<input class="contactInput" type="text" name="subject">
<label class="contactLabel">Body:</label>
<input class="contactInput" type="text" name="body">
<input type="submit" name="submit" value="Submit">
</form>
</section>
<footer class="">
<span class="">
Author:
</span>
<span class="">
Last Modified: 15.12.26
</span>
</footer>
<script src="./js/Indexer.js"></script></section>
templateLoader.js (45,14)
Templates Loaded.
templateLoader.js (51,14)