javascript - How can I use a template that is located in a separate file with mustache JS? - Stack Overflow

admin管理员组

文章数量:1289509

Okay so I want to separate my html and javascript for my project. I want to define a template in a file called template.htm and then use javascript/jQuery to get the file and add the JSON data etc to it then to render/pile it.

Script:

(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);
})();

Okay so I want to separate my html and javascript for my project. I want to define a template in a file called template.htm and then use javascript/jQuery to get the file and add the JSON data etc to it then to render/pile it.

Script:

(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);
})();

• javascript
• jquery
• mustache

Share Improve this question Follow edited Oct 15, 2016 at 21:36 Soviut 91.6k5353 gold badges207207 silver badges282282 bronze badges asked Oct 15, 2016 at 20:56 Jack SewellJack Sewell 11811 silver badge77 bronze badges 2

• Do you use GULP maybe? I wouldn't remend fetching each HTML template file via ajax, but rather bundle them or import each one you need prior to the building of your application code, to avoid slow ajax calls – vsync Commented Oct 15, 2016 at 21:01
• see this question - stackoverflow./q/22934469/104380 – vsync Commented Oct 15, 2016 at 21:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Here's a 2018 version using fetch to retrieve both the data and the template in parallel:

// Get external data with fetch
const data = fetch('data.json').then(response => response.json());

// Get external template with fetch
const template = fetch('template.mst').then(response => response.text());

// wait for all the data to be received
Promise.all([data,template])
.then(response => {

    resolvedData = response[0];
    resolvedTemplate = response[1];

    // Cache the template for future uses
    Mustache.parse(resolvedTemplate);

    var output = Mustache.render(resolvedTemplate, resolvedData);

    // Write out the rendered template
     return document.getElementById('target').innerHTML = output;

}).catch(error => console.log('Unable to get all template data: ', error.message));

From this article http://jonnyreeves.co.uk/2012/using-external-templates-with-mustachejs-and-jquery/

With JQuery you can .get() a file and then apply the Mustache rendering to it once it's arrived.

$.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));
});

Additionally, if you want to use the Mustache JQuery plugin:

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

本文标签： javascriptHow can I use a template that is located in a separate file with mustache JSStack Overflow