Schnurrbart ist meine Tags mit leeren Saiten

Question

Das Problem ersetzt

(Da dieses Posting, ich habe zu lösen es ein wenig näher gekommen, aber ich bin immer noch fest. Überprüfen Sie bitte das Update am Ende der Frage).

Ich habe eine Website, die Vorlage mit Mustache.js war. Wenn die Site lokal ausgeführt wird, funktioniert es einwandfrei. Die Vorlagen werden geladen, Moustache ersetzt die Moustache-Tags durch die angegebenen Daten und die Seite wird wie erwartet gerendert.

Wenn die Site von meinem (Schul-) Server ausgeführt wird, entwickelt sich jedoch ein seltsames Problem. Aus irgendeinem Grund ersetzt Mustache.render alle Schnurrbart-Tags in meiner Vorlage durch nichts (wie in leeren Strings). Offensichtlich verursacht dies, dass meine Seite sehr falsch geladen wird.

Was habe ich versucht, es zu Diagnostizieren

Konsolenprotokollierung verwenden, verfolgt ich die geladenen Vorlagen, und welche Schnurrbart produziert. Die Ergebnisse sind unten:

Die Daten in die Vorlagen zu stopfen (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" 
} 

Körpervorlage (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> 

Hier ist, wo es unterscheidet. die oben genannten Dateien durch Mustache.render lokal Nach dem Ausführen, hier sind die Ergebnisse:

<header class="mainHeader"> 
    <h1> 
     Uromastyces Fact Site 
    </h1> 
</header> 

<aside class="mainSideBar"> 
    <img class="sideBarImage" src="..&#x2F;images&#x2F;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> 

Genau wie ich erwarten würde. Alle Schnurrbart-Tags wurden entfernt und ersetzt mit den entsprechenden Daten aus dem JSON

Allerdings ist hier die Ergebnisse, wenn sie von meiner Schule Server (Der exakt gleiche Code) läuft:

<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> 

Beachten Sie, wie alle die Schnurrbart-Tags wurden einfach entfernt, anstatt durch die Daten ersetzt zu werden.

Ich weiß alles in Ordnung ist, heruntergeladen wird, so dass es kein Pfad Problem ist:

Während ich schon seit etwa einer Woche mit Schnurrbart, habe ich keine Ahnung, wie man ein Problem zu diagnostizieren wie Dies. Die obigen Snippets waren das Ergebnis der Konsolenprotokollierung, also habe ich überprüft, ob die Eingabe in Mustache.render geht, und alles wird ausgecheckt. Und wieder passiert das nur, wenn es remote gehostet wird.

Hier ist meine Rendering-Modul (templateLoader.js) (Die Batzen Konsolenprotokolle in der Mitte des renderPage ist die Quelle der oben genannten Schnipsel über den Entwickler 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.") 
     }); 
    } 
}; 

Und hier ist die vollständigen Ergebnisse der das Protokoll:

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) 

Irgendwelche Anleitung hier würde geschätzt werden.

Update:

So, während es das Debuggen, fand ich die mögliche Ursache des Problems aus, haben aber keine Ahnung, wie es zu lösen. Beim lokalen Debuggen wird das Objekt data (innerhalb renderPage) von Edge als JS-Objekt interpretiert und jedes seiner Attribute aufgelistet. Wann ist es Fern jedoch das Datenobjekt als String interpretiert wird (lokal auf der linken Seite, remote auf der rechten Seite):

Also, das Problem scheint zu sein, dass die data.json nicht werden auf der Serverseite richtig lesen.

Ich sollte beachten, dass ich lokal verwende ich Windows, aber der Schulserver ist "Apache/2.2.3 (Red Hat)" (gemäß Edge-Registerkarte Netzwerk). Ich änderte die Rückkehr von \r\n zu \n, um Unixstandards zu befolgen, aber es änderte nichts.

Ich habe die JSON-Datei durch alle Top-JSON-Validatoren laufen lassen, und es überprüft in allen von ihnen, so scheint es kein Formatierungsproblem zu sein.

Answer 1

Es sieht so aus, als ob Sie keine JSON-Daten aus der AJAX-Antwort analysieren. Das Dokument wird als reiner Text gelesen. (Sehen Sie sich Ihre Datenvariable an.)

Sie können JSON.parse(txt) oder jQuerys AJAX-Kurzschrift $.getJSON(...) verwenden.