mustache.js – looping

looping.html

<!doctype html>
<html lang="en">
  <head>
    <title>Mustache.js Looping - </title>
    <script type="text/javascript" src="jquery.min.js" ></script>
    <script type="text/javascript" src="mustache.js" ></script>
    <script>
    $(document).ready(function(){
        
        var tpl;
        
        $("#templates").load("template.html",function(){
            tpl = $('#loop').html();
            console.log('tpl',tpl);
          
            var data = {
                "name": "Gw",
                "skills": [
                    "JavaScript",
                    "PHP",
                    "MySQL"
                ]
            };
            
            var html = Mustache.to_html(tpl, data);
            console.log('html',html);
            $('#div1').html(html);
        
        });
    });
    </script>
  </head>
  <body>
    <div id="div1"></div>
    
    <div id="templates" style="display: none;"></div>
  </body>
</html>

template.html

<div id="loop">
{{name}} skills:
    <ul>
        {{#skills}}<li>{{.}}</li>{{/skills}}
    </ul>
</div>

mustache-loop

Published by

G3n1k

just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s