问题

Question

问题

（自发布以来，我已经接近解决它了，但我仍然卡住了。请在问题的最后检查更新。）

我有一个使用Mustache.js模板的网站。当站点在本地运行时，它工作正常。加载模板，Mustache用给定数据替换胡须标记，页面按预期呈现。

然而，当从我的（学校）服务器运行该站点时，它会产生一个奇怪的问题。无论出于何种原因，Mustache.render正在替换模板中的所有胡须标签（没有空字符串）。显然，这导致我的网站加载非常错误。

我试图诊断它

使用控制台日志记录，我跟踪了加载的模板以及Mustache生成的内容。结果如下：

要插入模板的数据（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"
}

Body Template（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>

这是它的不同之处。通过本地Mustache.render运行上述文件后，结果如下：

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

正如我所期待的那样。删除了所有的胡须标签，并替换为JSON

中的相应数据

但是，这是从我学校的服务器运行时的结果（完全相同的代码）：

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

注意如何简单地删除所有胡须标签，而不是被数据替换。

我知道所有内容都被正常下载，所以这不是路径问题：

虽然我一直使用小胡子大约一周，但我不知道如何诊断这样的问题。上面的代码片段是控制台日志记录的结果，因此我已经验证了输入到Mustache.render的内容，并且全部检出。而且，这只会在远程托管时发生。

这是我的渲染模块（templateLoader.js）（renderPage中间的控制台日志块是通过开发者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.")
        });
    }
};

以下是日志的完整结果：

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)

任何指导都将受到赞赏。

更新

因此，在调试时，我发现了问题的潜在根源，但不知道如何解决它。在本地调试时，data对象（在renderPage内）被Edge解释为JS对象，并列出其每个属性。但是当它是远程的时，数据对象被解释为一个字符串（本地在左边，在右边是远程）：

所以，问题似乎是在服务器端没有正确读取data.json。

我应该注意到，在本地，我使用的是Windows，但学校服务器是“Apache / 2.2.3（Red Hat）”（根据Edge的网络标签）。我将返回值从\r\n更改为\n以符合Unix标准，但它没有改变任何内容。

我通过所有顶级JSON验证器运行JSON文件，并在所有这些验证器中检出，因此它似乎不是格式化问题。

Answer 1

看起来你没有从AJAX响应中解析JSON数据。该文档以纯文本形式阅读。（看看你的数据变量。）

您可以使用JSON.parse(txt)或jQuery的AJAX速记$.getJSON(...)。

Mustache正在用空字符串

问题

我试图诊断它

更新

1 个答案: