Простой пример использования шаблонизатора Underscore.js

25.02.2014
Рассмотрим простою задачу:
Есть массив объектов, у которых есть id, заголовок и флаг (вкл. / выкл.)
Нужно вывести все элементы массива в виде списка (галка и поле для ввода)

В этом примере jQuery используется только для удобства.

HTML файл

Код - пример #1
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
 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
</head>
<body>


    <div class="container">

        <div id="lines">
            <ol class="list-unstyled"></ol>
        </div>

    </div>

<!--Template-->
<!--
    <%= key %> - выводим значение "как есть"
    <%- item.name %> - экранируем значение
-->

<script type="foo/bar" id='tmpl_ListItem'>
<%
    // repeat items
    _.each(items,function(oToDo, key, list){

        var sDone = oToDo.done?'checked="checked" ':'';
%>
<li data-id="<%= oToDo.id %>">
        <div class="itm">
            <input class="cbDone" type="checkbox" <%= sDone %>/>

            <input class="form-control" type="text" value="<%- oToDo.text %>" />
        </div>
</li>
<%
    });
%>
</script>
<!--Template-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/underscore-min.js" ></script>
    <script src="js/main.js" ></script>
    
</body>
</html>

Js файл

Код - пример #1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
$(function(){
    
    var lines = [],
        template = $("#tmpl_ListItem").html();
        
    lines.push({
        id : 1,
        text : 'Test1',
        done : false
    },
    {
        id : 2,
        text : 'Test2',
        done : true
    },
    {
        id : 3,
        text : 'Test3',
        done : false
    });
        
    $("#lines").html(_.template(template,{items:lines}));

});

Дополнительно, пример того, как можно подгружать шаблон динамически:

1
2
3
4
5
 
var template;
$.get('/templates/main.inc', function(template_text){
    template = _.template(template_text);
});

Категории: JavaScript
Яндекс.Метрика