backbone學習總結（二）

時間 2019-11-11

標籤 backbone 學習總結简体版

原文原文鏈接

今天來看下backbone的路由控制的功能。其實我的感受backbone，模塊就那麼幾個，熟悉它的框架結構，以及組成，就差很少。javascript

廢話很少說，咱們來看看還剩下的功能。css

關於路由和歷史管理html

經過 Backbone.Router.extend 來建立路由模型，連接到不一樣的指定的動做和事件.當應用已經所有連接到路由時，需利用Backbone.history.start() 或者Backbone.history.start({pushState: true}) 來確保驅動初始化 URL 的路由。前端

咱們來具體的看個列子：java

 //路由與歷史管理                 
  var   Workplace  =  Backbone.Router.extend({
        routers: {
                "help" : "help" ,  //對應的調用方法  #help
                 "search/:query" : "search" ,      #search/help
                 "search/:query/p:page" : "search"  #search/query/p3
        } ,

         help : function(){
                   console.log('111');
                     //alert('111');
          },

         search : function(query , page){
                     console.log('222');
                     //alert('333');
          }
  });
  var  w = new    Workplace ;  
  Backbone.history.start(); //保證路由在瀏覽器中有歷史管理

開始建立一個自定義的路由類。當匹配了 URL 片斷便執行定義的動做，並能夠經過routers 定義路由動做鍵值對。注意:要避免在路由定義時使用前導斜槓!!!!!jquery

關於事件委託git

什麼叫事件委託呢？即事件代理，利用冒泡原理，將某一元素的事件，委託給其它元素處理的事件。github

好處：提升性能 | 新添加的元素，依然保留了該事件。瀏覽器

    //事件委託
 $(function(){          
      var   V  =  Backbone.View.extend({
            el : $('body'),   //el當前的委託人。用BODY做爲委託人
            events : {        //事件
                  'click  input' : 'aaa' ,
                  'mouseover li ' : 'bbb'
            },
            aaa : function(){
                   console.log('aa');
            },
            bbb : function(){
                   console.log('bb')
            }
       });

       var    view  = new  V;
});

看下html相對應的代碼：mvc

<input type="button" value="name">
<ul>
     <li>11111111</li>
     <li>22222222</li>
     <li>33333333</li>
     <li>44444444</li>
</ul>

當點擊Input時候，發生click事件，觸發aaa，當鼠標移入li上時，觸發bbb。

關於前端模板

好處：更好的實現mvc機制，讓js的操做與試圖進行分離。一般是template:_.template($('#template').html())這種寫法。

 //前端模板 ：更好的讓js的操做與視圖進行分離   
   $(function(){
          var  M = Backbone.Model.extend({
               defaults : {
                     name : '婷風'
               }
          }) ;
     //建立一個試圖，listenTo比on多一個參數，改寫了this指向
          var  V = Backbone.View.extend({
               initialize : function (){
                     this.listenTo(this.model , ' change' , this.show); //操做的元素 | 數據發生改變的時候，發生show事件
                },
                show : function (model){
                     $('body').append(this.template(this.model.toJSON()  )); //調用模板的方法
                },
                template : _.template($(' #template').html()) 
           });
           var   m  = new  M; 
           var   v  = new  V({model:m});
           m.set('name' , 'jt' );
     });

html代碼以下：

<div  id="template"></div>

實例演練分析

效果地址：http://www.css88.com/doc/backbone/examples/todos/index.html

下載地址：https://github.com/foreverjiangting/backbone/tree/master/examples/todos

主頁html代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Backbone.js Todos</title>
  <link rel="stylesheet" href="todos.css"/>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="underscore-min.js"></script>
  <script type="text/javascript" src="backbone.js"></script>
  <script src="backbone.localStorage.js"></script> <script src="todos.js"></script>

</head>
<body>
  <div id="todoapp">
    <header>
      <h1>Todos</h1>
      <input id="new-todo" type="text" placeholder="What needs to be done?">
    </header>

    <section id="main">
      <input id="toggle-all" type="checkbox">
      <label for="toggle-all">Mark all as complete</label>
      <ul id="todo-list"></ul>   //包含每一個li元素
    </section>

    <footer>
      <a id="clear-completed">Clear completed</a>
      <div id="todo-count"></div>
    </footer>

  </div>

  <div id="instructions">
    Double-click to edit a todo.
  </div>

  <!-- 單個li的Templates -->

  <script type="text/template" id="item-template">
    <div class="view">
      <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
      <label><%- title %></label>
      <a class="destroy"></a>
    </div>
    <input class="edit" type="text" value="<%- title %>" />   //雙擊li中的輸入框進行編輯
  </script>


<!-- 底部的Templates -->
  <script type="text/template" id="stats-template">
    <% if (done) { %>
      <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>
    <% } %>
    <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>
  </script>

  </body>
</html>