ptemplate/example.html at master · peterh32/ptemplate · 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<html>
<head>
    <title>pTemplate Test Page</title>
    <!--script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script-->
    <script src="jquery-1.8.2.min.js"></script>
    <script src="jquery.ptemplate.js"></script>
    <script>
        var data = {
            species: 'moose',
            animals: [
                {weight:300, name:'<Bill>', friends: ['Ann','Bob','Heloise']},
                {weight:100, name:'Sam', friends: ['Ann','Bob']},
                {weight:120, name:'Heidi'}
            ],
            'name':'<b>Pedro</b>'
        };

        $(function(){
            // load the template and fill in the data
            var results = $('.my_template').fillInWith(data, {debug:true, trusted:true});
            // nuke the template class
            results.removeClass('my_template');
            // make it visible
            $('body').append(results);
            results.show();
        });
    </script>
</head>
<body>
<div class="my_template" style="display:none">
    My name is [[name|safe]] and I have [[animals|count]] [[species]][[animals|count|sIfPlural]]:
    <ul>
        <li data-repeat-on="animals">
            [[name]] who weighs [[weight]] pound[[weight|sIfPlural]]
            <div data-if="friends">
                Its friend[[friends|count|sIfPlural]]:
                <span data-repeat-on="friends">
                    <span data-if="loop_last && loop_multiple">and </span>
                    [[this]]<span data-if="loop_notlast">, </span>
                </span>
                <div data-else>It has no friends</div>
            </div>
        </li>
    </ul>
    <span data-if="animals.length>2" style="color:red">
        I have too many animals
        <span data-else style="color:green"> I don't have too many animals</span>
    </span>
</div>

</body>
</html>