Skip to content

Instantly share code, notes, and snippets.

@andersdn

andersdn/index.html

Created January 23, 2017 11:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andersdn/98b4a1a459d1122bd452a329e80fa0c6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andersdn/98b4a1a459d1122bd452a329e80fa0c6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. andersdn created this gist Jan 23, 2017.
    46 changes: 46 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>TITLE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    </head>
    <body>

    <div id="container">
    </div>

    <!-- jquery and underscore is overkill for this, but it makes it quicker -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="html/template" id="template_name_here">
    <h1>foo</h1>

    <ul>
    <% _.each(messages,function(i){ %>
    <li><%= i.name %> : <%= i.message %></li>
    <% }); %>
    </ul>

    </script>

    <script>

    // could be ajax, isnt
    var json_content = {
    messages:[
    {'name':'foo','message':'bar'},
    {'name':'foo2','message':'bar2'}
    ]
    }

    $(document).ready(function(){
    var tpl = _.template($('#template_name_here').html());
    $("#container").html(tpl(json_content));
    })
    </script>
    </div>

    </body>
    </html>