Question

好的，所以我想为我的项目分离我的html和javascript。我想在名为template.htm的文件中定义一个模板，然后使用javascript / jQuery获取文件并将JSON数据添加到其中然后进行渲染/编译。

脚本：

(function(){
    //this is our JSON (data)

    var data = {
        "cities": [
            {"name": "London"},
            {"name": "Paris"},
            {"name": "Munich"}
        ]
    },

    //get a reference to our HTML template
    src = $.get('../template.html');
    template = src.filter("#test").html()

    //tell Mustache.js to iterate through the JSON and insert the data into the HTML template
    output = Mustache.render(template, data);

    //append the HTML template to the DOM
    $('#container').append(output);
})();

Answer 1

这是一个2018版本，使用fetch来并行检索数据和模板：

     <object-to-string-transformer returnClass="java.lang.String" doc:name="Object to String"/>
        <expression-component doc:name="Expression"><![CDATA[import java.util.regex.*;

payload=payload.replaceAll("https[:]//.*./api/FHIR/DSTU2/", "https://api.anotherdomain.edu/FHIR/DSTU2/");

return payload;]]></expression-component>

        <object-to-string-transformer doc:name="Object to String"/>

Answer 2

从这篇文章http://jonnyreeves.co.uk/2012/using-external-templates-with-mustachejs-and-jquery/

使用JQuery，您可以.get()一个文件，然后在它到达后将Mustache渲染应用到它。

$.get('greetings.htm', function(templates) {
    // Fetch the <script /> block from the loaded external
    // template file which contains our greetings template.
    var template = $(templates).filter('#tpl-greeting').html();
    $('body').append(Mustache.render(template, templateData));
});

此外，如果您想使用Mustache JQuery插件：

$.Mustache.load('greetings.htm', function() {
    $('body').mustache('tpl-greeting', templateData);
});

如何使用位于带有胡子JS的单独文件中的模板？

2 个答案: