Il problema
(Da questo distacco, ho ottenuto un po 'più vicino alla sua soluzione, ma sto ancora bloccato. Si prega di verificare l'aggiornamento alla fine della questione).Baffi sta sostituendo i miei tag con stringhe vuote
Ho un sito che è stato modello utilizzando Mustache.js. Quando il sito viene eseguito localmente, funziona correttamente. I modelli sono caricati, Moustache sostituisce i tag dei baffi con i dati dati e il rendering della pagina come previsto.
Quando il sito viene eseguito dal mio server (scolastico), tuttavia, sviluppa un problema strano. Per qualsiasi motivo, Mustache.render sostituisce tutti i tag dei baffi nel mio modello con niente (come nelle stringhe vuote). Ovviamente, questo sta causando un errore nel mio sito.
Quello che ho cercato di diagnosticare
Utilizzando la registrazione della console, ho rintracciato i modelli caricati, e ciò che produce Baffi. I risultati sono di seguito:
I dati da inserire nella template (siteData.json):
{
"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"
}
Template corpo (BodyTemplate.mustache):
<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>
Ecco dove si differenzia. Dopo aver eseguito i file di cui sopra attraverso Mustache.render localmente, ecco i risultati:
<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:[email protected]">
<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>
Esattamente come mi aspetto. Tutti i tag baffi sono stati rimossi, e sostituiti con i corrispondenti dati del JSON
Tuttavia, ecco i risultati quando viene eseguito dal server della mia scuola (Lo stesso codice esatto):
<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:[email protected]">
<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>
Notate come tutte le i tag dei baffi sono stati semplicemente rimossi invece di essere sostituiti dai dati.
so tutto viene scaricato bene, quindi non è un problema di percorso:
Mentre ho usato i baffi per circa una settimana, non ho idea di come diagnosticare un problema come Questo. I frammenti di cui sopra erano il risultato della registrazione della console, quindi ho verificato l'input in Mustache.render e tutti i controlli vengono eseguiti. E ancora, questo succede solo quando è ospitato in remoto.
Ecco il mio modulo di rendering (templateLoader.js) (Il pezzo di log della console nel mezzo della renderPage è la fonte dei frammenti di cui sopra attraverso il Developer cosole):
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.")
});
}
};
Ed ecco i risultati completi della il registro:
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:[email protected]">
<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)
Qualsiasi consiglio qui sarebbe apprezzato.
Aggiornamento:
Così, durante il debug, ho scoperto il potenziale fonte del problema, ma non hanno alcuna idea di come risolverlo. Quando esegue il debug in locale, l'oggetto data (all'interno di renderPage) viene interpretato da Edge come un oggetto JS ed elenca ciascuno dei suoi attributi. Quando è a distanza tuttavia, l'oggetto di dati viene interpretata come una stringa (locale si trova sulla sinistra, a distanza a destra):
Quindi, il problema sembra essere che la data.json non è essere leggere correttamente sul lato server.
Devo notare che, localmente, sto usando Windows, ma il server scolastico è "Apache/2.2.3 (Red Hat)" (secondo la scheda Rete di Edge). Ho modificato i resi da \r\n a \n per aderire agli standard Unix, ma non ha cambiato nulla.
Ho eseguito il file JSON attraverso tutti i principali validatori JSON, e si verifica in tutti, quindi non sembra essere un problema di formattazione.
Perché dovrebbe funzionare localmente ma non da remoto? Darò questa prova però. Grazie. – Carcigenicate
Immagino che il server remoto non stia servendo l'intestazione content-type giusta. – mgrim
Vedete qualcosa di sbagliato nel mio file JSON? Ricevo un errore "Carattere non valido", ma non sono disponibili informazioni su quale carattere non è valido. L'ho eseguito attraverso i validatori online e il validatore di Webstorm, e viene verificato. 'Token inaspettato o'. Non vedo nessun "o" in posti strani. – Carcigenicate