mustache.js - 无法使用 jQuery get() 方法获取外部模板答案

【问题标题】：mustache.js - can't get external template with jQuery get() methodmustache.js - 无法使用 jQuery get() 方法获取外部模板
【发布时间】：2016-04-17 09:14:32
【问题描述】：

我想使用 jQuery 的 get() 方法在我的主页中包含一个外部模板，但我有一个问题。

以下消息显示在 Web 浏览器的控制台中：

TypeError：无效的模板！模板应该是“字符串”，但“未定义”作为 mustache#render(template, view, partials) - (mustache.min.js:1:9011)的第一个参数给出了

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body onload="myTemplate()">
    <div id="target">Loading ... </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
    <script type="text/javascript" src="my-script.js"></script>
</body>
</html>

templates.html

<script id="tpl-1" type="text/html">
    <p>{{ name }} wins {{ calc }} points</p>
</script>

my-script.js

// my-script.js

function myTemplate() {

    $.get("tpl/templates.html", function(templates) {
        var template = $(templates).filter("#tpl-1").html();

        var data = {
            name: "Guy",
            calc: function () {
            return 8 + 2;
            }
        };

        var rendered = Mustache.render(template, data);
        $('#target').html(rendered);
    });
}

尽管如此，它与 load() 方法配合得很好：

// my-script.js

function myTemplate() {

    $("#target").load("tpl/templates.html #tpl-1", function() {
        var template = $("#tpl-1").html();

        var data = {
            name: "Guy",
            calc: function() {
                return 8 + 2;
            }
        };

        var rendered = Mustache.render(template, data);
        $('#target').html(rendered);
    });
}

你有运行 get() 方法的想法吗？

【问题讨论】：

标签： jquery mustache

【解决方案1】：

    $(document).ready(function(){

    function myTemplate() {

    $.get("templates.html", function(templates) {
        var template = $(templates).filter("#tpl-1").html();

        var data = {
            name: "Guy",
            calc: function () {
            return 8 + 2;
            }
        };

        var rendered = Mustache.render(template, data);
        $('#target').html(rendered);
    });
}

$('#target').on('load', myTemplate());

});

【讨论】：