Mustache正在用空字符串替换我的标签

Question

Mustache正在用空字符串替换我的标签

Car*_*ate 7 javascript jquery html5 mustache

问题

(自发布以来,我已经接近解决它了,但我仍然卡住了.请检查问题末尾的更新).

我有一个使用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"
}

Run Code Online (Sandbox Code Playgroud)

身体模板(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>

Run Code Online (Sandbox Code Playgroud)

这是它的不同之处.通过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>

Run Code Online (Sandbox Code Playgroud)

正如我所期待的那样.删除了所有的胡须标记,并替换为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>

Run Code Online (Sandbox Code Playgroud)

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

我知道一切都被正常下载,所以这不是路径问题:

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

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

Run Code Online (Sandbox Code Playgroud)

这是日志的完整结果:

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)

Run Code Online (Sandbox Code Playgroud)

任何指导在这里将不胜感激.

更新:

因此,在调试时,我发现了问题的潜在根源,但不知道如何解决它.在本地调试时,Edge 将data对象(内部renderPage)解释为JS对象,并列出其每个属性.但是,当它是远程时,数据对象被解释为String(本地在左侧,远程在右侧):

因此,问题似乎data.json是在服务器端没有正确读取.

我应该注意到,在本地,我使用Windows,但学校服务器是"Apache/2.2.3(Red Hat)"(根据Edge的网络选项卡).我改变了从返回\r\n到\n坚持Unix的标准,但它并没有改变任何东西.

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

Answer 1

小智 2

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

您可以使用JSON.parse(txt)jQuery 的 AJAX 简写$.getJSON(...)。

归档时间：	10 年前
查看次数：	738 次
最近记录：	10 年前