Underscore_tutorial/multiUserProfileTemplate.html at master · jbhelfrich/Underscore_tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Staff Profile Page</title>
    <meta charset="utf-8">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
    <script>
        window.onload = initPage;
        function initPage() {
            // Variables are unchanged, except we're getting a different JSON file.
            var exampleValues = {},
                    parsedTemplate = "",
                    templateText = $('#profileTemplate').html(),
                    demoTemplate = _.template(templateText);
            $.ajax({url: "data/multiprofiledata.json", async: false, dataType: "json", success: function(json) {exampleValues = json;}});
            // The for loop runs the values for each employee through the demoTemplate
            // function, and builds the parsedTemplate HTML from the results.
            for (employee in exampleValues.company_employees) {
                parsedTemplate += demoTemplate(exampleValues.company_employees[employee]);
            }
            // The rest of the page is the same as the previous example.
            $("#profileBlock").html(parsedTemplate);
        }
    </script>
</head>
<body>
    <div id="profileBlock"></div>
    <script id="profileTemplate" type="text/template">
        <h1><%= header %></h1>
        <h3>Name: <%= name %></h3>
        <h3>Address: <%= address %></h3>
        <h3>Phone: <%= phone %></h3>
        <p>Interests: <%= interests %></p>
    </script>
</body>
</html>