@52fhy 2016-01-22T08:54:56.000000Z 字数 798 阅读 571

10-backbone视图--模板逻辑

backbone

在模板里，我们可以使用if等逻辑语句。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="lib/jquery-1.10.2.js"></script>
    <script src="lib/underscore.js"></script>
    <script src="lib/backbone.js"></script>
</head>
<body>
<div id="search_container"></div>
    <!--定义模板-->
<script type="text/template" id="search_template">
    <ul>
            <% _.each(labels, function(name) { %>
                 <% if(name != 'label2'){ %>
                    <li><%= name %></li>
                 <% } %>
            <% }); %>
    </ul>
</script>
<script>
    //_.each(list, function(v, k, l))
    var SearchView = Backbone.View.extend({
        initialize: function () {
            var ls = ['label1', 'label2', 'label3'];
            this.render({labels: ls});
        },
        el: $('#search_container'),//绑定el
		render: function (content) {
			 var temp = _.template($('#search_template').html(), content);
			 $(this.el).html(temp);//将编译好的模板内容放到this.el
        }
    });
    var view_one = new SearchView();
</script>
</body>

10-backbone视图--模板逻辑

内容目录