Tutorial: HTML Templates with Mustache.js

来源：互联网发布：java native memory 编辑：程序博客网时间：2024/06/05 00:53

转自: http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/

When developing modern HTML applications, you often write a lot of HTML fragments programmatically. You concatenate HTML tags and dynamic data, and insert the resulting UI markup into the DOM. Here is a random code example of this approach:

1
2
3
4
5
6
7
8
9
$.each(messages.reverse(),function(index, message) {
    $('#messageList').append(
        '<li><span class="list-title">' +
        message.userName + '</span>'+
        '<abbr class="list-timestamp" title="' +
        message.datePosted + '"></abbr>'+
        '<p class="list-text">' + message.messageText + '</p></li>');
    }
});

The proliferation of this kind of code throughout your application comes with some downsides. The tight coupling of UI and data logic doesn’t promote separation of concerns and reuse. It makes your application harder to write and harder to maintain.

HTML templates address this issue by decoupling the UI definition (HTML markup) from the data. There are a number of HTML template solutions out there: jQuery Templates, Underscore.js, andMustache.js to name a few. Mustache.js is a popular choice because of its powerful syntax and fast rendering.

Mustache is a “logic-less” template syntax. “Logic-less” means that it doesn’t rely on procedural statements (if, else, for, etc.): Mustache templates are entirely defined with tags. Mustache is implemented in different languages: Ruby, JavaScript, Python, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, Scala, etc. Mustache.js is the JavaScript implementation.

In this article, we take a quick tour of some of the capabilities of Mustache.js.

To start using Mustache.js, simply add a script tag to your html file pointing to mustache.js which is available here.

You can run all the examples below here.

Sample 1: Basic Template

This is a self-explanatory example. Note that:

Instead of being defined in a variable, the data often comes from a service call (see sample 2)
Instead of being defined in a variable, the template is often read from a file (see sample 3)

1
2
3
4
5
6
7
8
varperson = {
    firstName:"Christophe",
    lastName:"Coenraets",
    blogURL:"http://coenraets.org"
};
vartemplate = "<h1>{{firstName}} {{lastName}}</h1>Blog: {{blogURL}}";
varhtml = Mustache.to_html(template, person);
$('#sampleArea').html(html);

Result:

Christophe Coenraets

Blog: http://coenraets.org

Sample 2: Basic Template using Ajax data

Same as sample 1, except that we get the data from an Ajax service call.

1
2
3
4
5
$.getJSON('json/data.json',function(data) {
    vartemplate = "<h1>{{firstName}} {{lastName}}</h1>Blog: {{blogURL}}";
    varhtml = Mustache.to_html(template, data);
    $('#sampleArea').html(html);
});

Result:

John Smith

Blog: http://johnsmith.com

Sample 3: Externalized Template

Same as sample 2, except that we read the template from the main HTML file.

1
2
3
4
5
$.getJSON('json/data2.json',function(data) {
    vartemplate = $('#personTpl').html();
    varhtml = Mustache.to_html(template, data);
    $('#sampleArea').html(html);
});

The template is defined as follows in index.html:

1
2
3
4
<scriptid="personTpl"type="text/template">
<h1>{{firstName}} {{lastName}}</h1>
<p>Blog URL: <ahref="{{blogURL}}">{{blogURL}}</a></p>
</script>

Result:

Lisa Jones

Blog URL: http://lisajones.com

NOTE: Sample 3 represents the way templates are being used in many dynamic Web applications:

You get data from an Ajax service
You read the template from an external file

In the remaining of this article, we declare the data and the template in variables to keep the examples self-contained. Remember to refer to sample 3 for a traditional setup when using templates in a dynamic Web application.

Sample 4: Enumerable Section

1
2
3
4
vardata = {name: "John Smith", skills: ['JavaScript','PHP','Java']};
vartpl = "{{name}} skills:<ul>{{#skills}}<li>{{.}}</li>{{/skills}}</ul>";
varhtml = Mustache.to_html(tpl, data);
$('#sampleArea').html(html);

Result:

John Smith skills:

JavaScript
PHP
Java

Sample 5: Enumerable Section with Objects

1
2
3
4
5
6
7
8
9
10
11
12
vardata = {
    employees: [
    {   firstName: "Christophe",
        lastName:"Coenraets"},
    {   firstName: "John",
        lastName:"Smith"}
    ]};
vartemplate = "Employees:<ul>{{#employees}}"+
                            "<li>{{firstName}} {{lastName}}</li>" +
                            "{{/employees}}</ul>";
varhtml = Mustache.to_html(template, data);
$('#sampleArea').html(html);

Result:

Employees:

Christophe Coenraets
John Smith

Sample 6: Nested Objects

You can use the dot notation to access object properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
varperson = {
    firstName:"Christophe",
    lastName:"Coenraets",
    blogURL:"http://coenraets.org",
    manager : {
        firstName:"John",
        lastName:"Smith"
    }
};
vartemplate = "<h1>{{firstName}} {{lastName}}</h1><p>{{blogURL}}</p>" +
               "Manager: {{manager.firstName}} {{manager.lastName}}";
varhtml = Mustache.to_html(template, person);
$('#sampleArea').html(html);

Result:

Christophe Coenraets

http://coenraets.org

Manager: John Smith

Sample 7: Dereferencing

Same as sample 6, except that we “dereference” the manager object to make it easier to access its properties (without having to use the dot notation).

1
2
3
4
5
6
7
8
9
10
11
12
13
varperson = {
    firstName:"John",
    lastName:"Smith",
    blogURL:"http://johnsmith.com",
    manager : {
        firstName:"Lisa",
        lastName:"Jones"
    }
};
vartpl = "<h1>{{firstName}} {{lastName}}</h1><p>{{blogURL}}</p>" +
          "{{#manager}}Manager: {{firstName}} {{lastName}}{{/manager}}";
varhtml = Mustache.to_html(tpl, person);
$('#sampleArea').html(html);

Result:

John Smith

http://johnsmith.com

Manager: Lisa Jones

Sample 8: Function

Templates can reference functions like totalPrice in this example.

1
2
3
4
5
6
7
8
9
10
11
varproduct = {
    name:"FooBar",
    price: 100,
    salesTax: 0.05,
    totalPrice:function() {
        returnthis.price + this.price * this.salesTax;
    }
};
vartemplate = "<p>Product Name: {{name}}</p>Price: {{totalPrice}}";
varhtml = Mustache.to_html(template, product);
$('#sampleArea').html(html);

Result:

Product Name: FooBar

Price: 105

Sample 9: Condition

Templates can include conditional sections. Conditional sections only render if the condition evaluates to true. A conditional section begins with {{#condition}} and ends with {{/condition}}. “condition” can be a boolean value or a function returning a boolean.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
vardata = {
    employees: [
    {   firstName: "Christophe",
        lastName:"Coenraets",
        fullTime:true,
        phone:"617-123-4567"
    },
    {   firstName: "John",
        lastName:"Smith",
        fullTime:false,
        phone:"617-987-6543"
    },
    {   firstName: "Lisa",
        lastName:"Jones",
        fullTime:true,
        phone:"617-111-2323"
    },
    ]};
vartpl = "Employees:<ul>{{#employees}}<li>{{firstName}} {{lastName}}" +
          "{{#fullTime}} {{phone}}{{/fullTime}}</li>{{/employees}}</ul>";
varhtml = Mustache.to_html(tpl, data);
$('#sampleArea').html(html);

Result:

Employees:

Christophe Coenraets 617-123-4567
John Smith
Lisa Jones 617-111-2323

Sample 10: Partials

1
2
3
4
5
6
7
8
9
10
11
12
13
vardata = {
    firstName:"Christophe",
    lastName:"Coenraets",
    address:"1 Main street",
    city:"Boston",
    state:"MA",
    zip:"02106"
};
 
vartemplate = "<h1>{{firstName}} {{lastName}}</h1>{{>address}}";
varpartials = {address: "<p>{{address}}</p>{{city}}, {{state}} {{zip}}"};
varhtml = Mustache.to_html(template, data, partials);
$('#sampleArea').html(html);

Result:

Christophe Coenraets

1 Main street

Boston, MA 02106

Sample 11: Partials in Enumerable Section

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
vardata = { depts: [
    {   name: "Engineering",
        employees: [
            {firstName:"Christophe", lastName: "Coenraets"},
            {firstName:"John", lastName: "Smith"}]
    },
    {   name: "Sales",
        employees: [
            {firstName:"Paula", lastName: "Taylor"},
            {firstName:"Lisa", lastName: "Jones"}]
    }]
};
 
vartpl = "{{#depts}}<h1>{{name}}</h1>"+
          "<ul>{{#employees}}{{>employee}}{{/employees}}</ul>{{/depts}}";
varpartials = {employee: "<li>{{firstName}} {{lastName}}</li>"};
varhtml = Mustache.to_html(tpl, data, partials);
$('#sampleArea').html(html);

Result:

Engineering

Christophe Coenraets
John Smith

Sales

Paula Taylor
Lisa Jones

You can run all the examples here.