Backbone.js實戰之視圖學習筆記

時間 2019-11-09

標籤 backbone.js backbone 實戰視圖學習筆記欄目 JavaScript 简体版

原文原文鏈接

　　嚴格來講模型（Model）和集合（Collection）都屬於底層的數據處理，真正與頁面交互的視圖（View)，他的核心功能是處理數據業務邏輯，綁定DOM事件，渲染模型和集合數據。javascript

el：表示該View所表明的DOM元素，在render函數中，會同步到DOM操做中去。
initialze：調用new時，會觸發的函數調用，相似構造函數。
render：觸發DOM操做，瀏覽器會渲染
最後一句，說明在new時，能夠傳遞參數

1.1 經過視圖對象添加DOM元素css

a. 功能描述html

b. 實現代碼前端

    <style type="text/css">
        .cls_6
        {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="show" class="cls_6"></div>
</body>
<script type="text/javascript">
    var testview = Backbone.View.extend({
        el: '#show',
        render: function (content) {
            this.el.innerHTML = content;
        }
    });
    var test = new testview();
    test.render("backbone是構建前端MVC的利器");
</script>

c. 頁面效果java

d. 源碼分析瀏覽器

1.2 視圖對象訪問模型app

a. 功能描述框架

b. 實現代碼curl

    <style type="text/css">
        .cls_6
        {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="show" class="cls_6"></div>
</body>
<script type="text/javascript">
    var student = Backbone.Model.extend({
        defaults: {
            Code: "",
            Name: "",
            Score: 0
        }
    });
    var stus = new student({
        Code: "10107",
        Name: "陶國榮",
        Score: 750
    });
    var stusview = Backbone.View.extend({
        el: '#show',
        render: function () {
            this.el.innerHTML = JSON.stringify(this.model);
        }
    });
    var stuv = new stusview({ model: stus });
    stuv.render();
</script>

c. 頁面效果函數

d. 源碼分析

1.3 視圖對象訪問集合對象

a. 功能描述

b. 實現代碼

    <style type="text/css">
        .cls_6
        {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="show" class="cls_6"></div>
</body>
<script type="text/javascript">
    var stumodels = [{
        Code: "10101",
        Name: "劉真真",
        Score: 530
    }, {
        Code: "10102",
        Name: "張明基",
        Score: 460
    }, {
        Code: "10103",
        Name: "舒虎",
        Score: 660
    }, {
        Code: "10104",
        Name: "周小敏",
        Score: 500
    }, {
        Code: "10105",
        Name: "陸明明",
        Score: 300
    }];
    var stulist = new Backbone.Collection(stumodels);
    var stuview = Backbone.View.extend({
        el: '#show',
        render: function () {
            var curlist = this.collection.models;
            for (var i = 0; i < curlist.length; i++) {
                this.el.innerHTML += JSON.stringify(curlist[i]) + "</br>";
            }
        }
    });
    var stuv = new stuview({ collection: stulist });
    stuv.render();
</script>

c. 頁面效果

d. 源碼分析

1.4 處理邏輯的模板

a. 功能描述

b. 實現代碼

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        div
        {
            width: 260px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="score"></div>
    <script type="text/template" id="score-tpl">
       <%= score>600 ? "優秀":"及格"%>
    </script>
</body>
<script type="text/javascript">
    var stuview = Backbone.View.extend({
        el: $("#score"),
        initialize: function () {
            this.template = _.template($("#score-tpl").html());
        },
        render: function (pscore) {
            this.$el.html(this.template({ score: pscore }));
        }
    });
    //實例化一個view視圖
    var stuv = new stuview();
    stuv.render(600)
</script>

c. 頁面效果

d. 源碼分析

1.5 顯示多項內容的模板

a. 功能描述

b. 實現代碼

    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        ul
        {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <ul id="ulshowstus"></ul>
    <script type="text/template" id="stus-tpl">
       <li>編號：<%=Code%></li>
       <li>姓名：<%=Name%></li>
       <li>分數：<%=Score%></li>
    </script>
</body>
<script type="text/javascript">
    var student = Backbone.Model.extend({
        defaults: {
            Code: "",
            Name: "",
            Score: 0
        }
    });
    var stus = new student({
        Code: "10107",
        Name: "陶國榮",
        Score: 750
    });
    var stuview = Backbone.View.extend({
        el: $("#ulshowstus"),
        initialize: function () {
            this.template = _.template($("#stus-tpl").html());
        },
        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
        }
    });
    //實例化一個view視圖
    var stuv = new stuview({ model: stus });
    stuv.render();  
</script>

c. 頁面效果

d. 源碼分析

1.6 自定義模板變量標記

a. 功能描述

b. 實現代碼

    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        ul
        {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <ul id="ulshowstus"></ul>
    <script type="text/template" id="stus-tpl">
       <li>自定義模版變量標記</li>
       <li>編號：{{Code}}</li>
       <li>姓名：{{Name}}</li>
       <li>分數：{{Score}}</li>
    </script>
</body>
<script type="text/javascript">
    _.templateSettings = {
        interpolate: /\{\{(.+?)\}\}/g
    };
    var student = Backbone.Model.extend({
        defaults: {
            Code: "",
            Name: "",
            Score: 0
        }
    });
    var stus = new student({
        Code: "10106",
        Name: "佔小方",
        Score: 380
    });
    var stuview = Backbone.View.extend({
        el: $("#ulshowstus"),
        initialize: function () {
            this.template = _.template($("#stus-tpl").html());
        },
        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
        }
    });
    //實例化一個view視圖
    var stuv = new stuview({ model: stus });
    stuv.render();  
</script>

c. 頁面效果

d. 源碼分析

1.7 視圖中簡單事件綁定

a. 功能描述

b. 實現代碼

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        div
        {
            width: 260px;
            text-align: center;
            padding: 5px;
        }
        .changed
        {
            border: solid 1px #555;
        }
    </style>
</head>
<body>
</body>
<script type="text/javascript">
    var stuview = Backbone.View.extend({
        el: $("body"),
        initialize: function () {
            this.render();
        },
        render: function () {
            this.$el.append('<div id="backbone">backbone是構建前端MVC的利器</div>');
        },
        events: {
            'click div#backbone': 'togcls'
        },
        togcls: function () {
            $("#backbone").toggleClass("changed");
        }
    });
    //實例化一個view視圖
    var stuv = new stuview();
</script>

c. 頁面效果

d. 源碼分析

1.8 綁定視圖中的多個事件

a. 功能描述

b. 實現代碼

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        div
        {
            width: 260px;
            text-align: center;
            padding: 5px;
        }
        .changed
        {
            border: solid 1px #555;
        }
    </style>
</head>
<body>
    <div id="main">
    </div>
    <script type="text/template" id="main-tpl">
       <div id="backbone"><%=mess%></div>
       <input id="btnshow" type="button" value="點擊一下" />
    </script>
</body>
<script type="text/javascript">
    var stuview = Backbone.View.extend({
        el: $("#main"),
        initialize: function () {
            this.template = _.template($("#main-tpl").html());
            this.render();
        },
        render: function () {
            this.$el.html(this.template({
                mess: "backbone是構建前端MVC的利器"
            })
            );
        },
        events: {
            'click div#backbone': 'togcls',
            'click input#btnshow': 'toggle'
        },
        togcls: function () {
            $("#backbone").toggleClass("changed");
        },
        toggle: function () {
            $("#backbone").toggle();
        }
    });
    //實例化一個view視圖
    var stuv = new stuview();
</script>

c. 頁面效果

d. 源碼分析

1.9 動態綁定和取消視圖中的事件

a. 功能描述

b. 實現代碼

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        div
        {
            width: 260px;
            text-align: center;
            padding: 5px;
        }
        .changed
        {
            border: solid 1px #555;
        }
    </style>
</head>
<body>
    <div id="main">
    </div>
    <script type="text/template" id="main-tpl">
       <div id="backbone">backbone是構建前端MVC的利器</div>
       <input id="btn_a" type="button" value="切換樣式" />
       <input id="btn_b" type="button" value="取消綁定" />
       <input id="btn_c" type="button" value="從新綁定" onclick="stuv.rebind()"/>
    </script>
</body>
<script type="text/javascript">
    var stuv = null;
    var stuview = Backbone.View.extend({
        el: $("#main"),
        initialize: function () {
            this.template = _.template($("#main-tpl").html());
            this.render();
        },
        render: function () {
            this.$el.html(this.template());
        },
        rebind: function () {
            this.delegateEvents(this.events);
        },
        events: {
            'click input#btn_a': 'btnclick_a',
            'click input#btn_b': 'btnclick_b'
        },
        btnclick_a: function () {
            $("#backbone").toggleClass("changed");
        },
        btnclick_b: function () {
            this.undelegateEvents();
        }
    });
    //實例化一個view視圖
    stuv = new stuview();
</script>

c. 頁面效果

d. 源碼分析

1.10 使用Backbone框架開發Web應用

a. 功能描述

b. 實現代碼

    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        ul
        {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
            width: 270px;
        }
        ul li
        {
            margin: 5px 0px;
        }
        ul .lh
        {
            font-weight: bold;
            border-bottom: solid 1px #555;
            background-color: #eee;
            height: 23px;
            line-height: 23px;
        }
        ul .lc
        {
            border-bottom: dashed 1px #ccc;
            height: 23px;
            line-height: 23px;
        }
        ul li span
        {
            padding-left: 10px;
            width: 80px;
            float: left;
        }
    </style>
</head>
<body>
    <ul id="ulshowstus">
        <li class="lh">
            <span>編號</span>
            <span>姓名</span>
            <span>分數</span>
        </li>
    </ul>
    <br />
    <ul>
        <li>編號：
            <input id="txtCode" type="text" />
        </li>
        <li>姓名：
            <input id="txtName" type="text" />
        </li>
        <li>分數：
            <input id="txtScore" type="text" />
        </li>
        <li>
            <input id="btnSubmit" type="button" 
                   value="提交" />
        </li>
    </ul>
    <script type="text/template" id="stus-tpl">  
       <li class="lc">
           <span><%=Code%></span>
           <span><%=Name%></span>
           <span><%=Score%></span>
       </li>
    </script>
</body>
<script type="text/javascript">
    var student = Backbone.Model.extend({
        defaults: {
            Code: "10001",
            Name: "張三",
            Score: 100
        }
    });
    var stulist = Backbone.Collection.extend({
        initialize: function (model, options) {
            this.on("add", options.view.showmodel);
        }
    });
    var stuview = Backbone.View.extend({
        el: $("body"),
        initialize: function () {
            this.stul = new stulist(null, { view: this })
        },
        events: {
            "click #btnSubmit": "addmodel"
        },
        addmodel: function () {
            var stum = new student({
                Code: $("#txtCode").val(),
                Name: $("#txtName").val(),
                Score: $("#txtScore").val()
            });
            this.stul.add(stum);
        },
        showmodel: function (model) {
            this.template = _.template($("#stus-tpl").html());
            $("#ulshowstus").append(this.template(model.toJSON()));
        }
    });
    //實例化一個view視圖
    var stuv = new stuview();
</script>