Backbone.js入門教程第二版筆記（3）

時間 2019-11-17

標籤 backbone.js backbone 入門教程第二筆記欄目 JavaScript 简体版

原文原文鏈接

視圖渲染html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.9.1.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>

</head>
<body>
    <div id="search_container"></div>

    <script type="text/template" id="search_template">
        <label><%= search_label %></label>
        <input type="text" id="search_input" />
        <input type="button" id="search_button" value="Search" />
    </script>

<script>
(function ($) {
    //此處添加下面的試驗代碼
    var SearchView=Backbone.View.extend({
        initialize:function(){},//初始化
        render:function(content){//渲染方法
            var template=_.template($('#search_template').html(),content);//模板解析
            $(this.el).html(template);//將解析後的代碼片斷添加到el中
        }
    });

    var searchView=new SearchView({//實例化一個視圖
        el:$('#search_container')//指定el元素 （每一個視圖都會有el屬性，若是不是咱們指定，則backbone會自動生成一個div元素）
    });
    searchView.render({search_label:"搜索渲染"});//調用視圖的渲染方法

})(jQuery);
</script>
</body>
</html>

須要注意的是在調用view.render的時候，須要給模板中全部的變量傳值，否則會報錯。關於$el，做者說是對view中元素的緩存，不明白這是什麼意思，我感受是jquery形式的el對象。

jquery

<ul>
<% _.each(labels, function(name) { %>
    <% if(name != "label2") {%>
    <li><%= name %></li>
    <% } %>
<% }); %>
</ul>

var SearchView = Backbone.View.extend({
    el: "#search_container",

    initialize: function(){
        var labels = ['label1', 'label2', 'label3'];
        this.render({labels: labels});
    },

    render: function(context) {
        //使用underscore這個庫，來編譯模板
        var template = _.template($("#search_template").html(), context);
        //加載模板到對應的el屬性中
        $(this.el).html(template);
    },

});

var searchView = new SearchView();

這個例子與第一個相似，只不過它是在初始化的時候渲染了視圖，而且el是在建立SearchView的時候設置的，模板也比第一個例子複雜點。緩存

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。