实例讲解JavaScript的Backbone.js框架中的View视图_基础知识

Backbone 中的 View 用来反映你 app 中 Model 的模样。它们会监听事件并作出相应的反应。
接下来的教程我不会告诉你如何把 Model 和 Collection 绑定到 View 上，而是主要讨论 View 是如何使用 javascript 模板库的，尤其是 Underscore.js's _.template。
这里我们使用 jQuery 来操作 DOM 元素，当然你也可以使用其他的库，例如 MooTools 或者 Sizzle,但是 Backbone 的官方文档推荐我们使用 jQuery。
接下来，我们以搜索框为例来新建一个 View：

SearchView = Backbone.View.extend({
  initialize: function(){
    alert("Welcome to Backbone!");
  }
});
var search_view = new SearchView();

无论是 Model，View 还是 Collection，当被实例化时，initialize() 方法都会被自动触发。

el 属性
el 属性指的是已经在浏览器中创建好的 DOM 对象，每个 View 都有一个 el 属性，如果它未被定义，Backbone 将会自己创建一个空的 div 元素作为 el 属性。
下面让我们来为 View 创建一个 el 属性，并设为 #search_containe。

<div id="search_container"></div>
<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      alert("Welcome to Backbone!");
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

此时，View 的 el 属性指的是 id 为 search_container 的 div 元素。我们此时变绑定了这个 div 元素，那么任何我们希望触发的事件都必须在这个 div 元素中。

加载模板
Backbone 是强依赖于 Underscore.js 的，所以我们可以使用 Underscore.js 中的小型模板。
现在，让我们添加一个 render() 方法，并且在 initialize() 中调用它，这样当 View 初始化时便会自动触发 render() 方法。
这个 render() 方法将会通过 jQuery 把模板加载到 View 的 el 属性中去。

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

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

<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      // 通过 Underscore 编译生成模板
      var template = _.template( $("#search_template").html(), {} );
      //讲生成的模板加载到 el 属性中
      this.$el.html( template );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

添加监听事件
我们使用 View 的 events 属性添加监听事件，记住监听事件只能添加到 el 属性的子元素上。现在，我们来给子元素 button 添加一个监听事件。

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

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

<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      var template = _.template( $("#search_template").html(), {} );
      this.$el.html( template );
    },
    events: {
      "click input[type=button]": "doSearch"
    },
    doSearch: function( event ){
      // 当 button 被点击时触发 alert 
      alert( "Search for " + $("#search_input").val() );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

向模板中传递参数
模板可以通过 的形式使用从 View 中传来的参数。

<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>

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

<script type="text/javascript">
   SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      //定义需要传递的参数
      var variables = { search_label: "My Search" };
      // 通过 Underscore 生成模板，同时传递参数
      var template = _.template( $("#search_template").html(), variables );
      // Load the compiled HTML into the Backbone "el"
      this.$el.html( template );
    },
    events: {
      "click input[type=button]": "doSearch" 
    },
    doSearch: function( event ){
      alert( "Search for " + $("#search_input").val() );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

处理DOM事件
视图很重要的一个特性是帮助我们自动绑定界面事件。回想一下我们以前是如何为界面标签绑定事件的？可能就像这样：

<p> 
  <input type="button" value="Create" id="create" /> 
  <input type="button" value="Read" id="read" /> 
  <input type="button" value="Update" id="update" /> 
  <input type="button" value="Delete" id="delete" /> 
</p> 
<script type="text/javascript"> 
  function createData() { 
    // todo 
  } 
  function readData() { 
    // todo 
  } 
  function updateData() { 
    // todo 
  } 
  function deleteData() { 
    // todo 
  } 
 
  $('#create').on('click', createData); 
  $('#read').on('click', readData); 
  $('#update').on('click', updateData); 
  $('#delete').on('click', deleteData); 
</script> 

这是一个典型的通过jQuery绑定DOM事件的例子，如果你正在开发或曾经开发过一些复杂的应用，你可能尝试过通过某种方式将这些代码更好的组织起来，以便使它们看起来结构更加清晰，更易维护。
Backbone的视图对象为我们提供了事件的自动绑定机制，用于更好地维护DOM和事件间的关系，来看看下面的例子：

<p id="view"> 
  <input type="button" value="Create" id="create" /> 
  <input type="button" value="Read" id="read" /> 
  <input type="button" value="Update" id="update" /> 
  <input type="button" value="Delete" id="delete" /> 
</p> 
<script type="text/javascript"> 
  var MyView = Backbone.View.extend({ 
    el : '#view', 
    events : { 
      'click #create' : 'createData', 
      'click #read' : 'readData', 
      'click #update' : 'updateData', 
      'click #delete' : 'deleteData' 
    }, 
    createData : function() { 
      // todo 
    }, 
    readData : function() { 
      // todo 
    }, 
    updateData : function() { 
      // todo 
    }, 
    deleteData : function() { 
      // todo 
    } 
  }); 
  var view = new MyView(); 
</script> 

在这个例子中，我们将4个按钮放在一个id为view的标签中，并将这个标签与视图类MyView进行了关联。
在定义视图类时，我们声明了一个events属性，它表示视图中的用户事件列表，描述方式如下：

事件名称 选择器 : 事件处理函数

事件名称可以是DOM对象支持的任何事件，选择器可以是jQuery或Zepto支持的任意选择器字符串（包括标签选择器、类选择器、id选择器等），而事件处理函数应该是已经定义在视图类本身的方法名称。
视图对象会自动解析events列表中的描述，即使用jQuery或Zepto获取选择器描述的DOM对象，并将事件处理函数绑定到事件名称中。这些操作都会在视图类被实例化时自动完成，我们可以更关心视图类本身的结构，而不是刻意地去考虑如何绑定事件。

Anda mungkin bimbang tentang soalan lain: Jika struktur DOM paparan dijana secara dinamik, adakah Backbone menyediakan kaedah yang sepadan untuk peristiwa mengikat dan tidak mengikat secara dinamik?
Sebenarnya, anda tidak perlu risau tentang isu ini, kerana peristiwa dalam acara terikat pada elemen el objek pandangan melalui kaedah delegate(), bukan elemen yang diterangkan oleh pemilih. Oleh itu, tidak kira bagaimana struktur dalam paparan berubah, peristiwa dalam peristiwa adalah sah.
(Jika anda biasa dengan jQuery, anda mungkin tahu tentang kaedah delegate() yang disediakannya. Kaedah ini sebenarnya mengikat acara kepada elemen induk, dan kemudian mencetuskan acara dengan menyemak elemen anak sasaran semasa proses menggelegak acara.)
Objek pandangan mengikat peristiwa melalui kaedah delegate(), yang bermaksud bahawa kita tidak perlu mengambil berat tentang kesan perubahan dalam struktur paparan pada acara Ia juga bermakna elemen yang sepadan dengan pemilih dalam acara mesti berada dalam el elemen pandangan, jika tidak terikat Peristiwa tidak boleh berkuat kuasa.

Walau bagaimanapun, dalam sesetengah kes, kami mungkin masih perlu mengikat dan menyahjilid acara secara manual Objek pandangan menyediakan kaedah delegateEvents() dan unelegateEvents() untuk mengikat dan menyahjilidkan senarai acara secara dinamik. Anda boleh menyemak dokumentasi API untuk berbuat demikian. Ketahui tentang mereka.
Memaparkan paparan dan data
Paparan digunakan terutamanya untuk pengikatan acara antara muka dan pemaparan data Walau bagaimanapun, objek paparan hanya menyediakan satu kaedah yang berkaitan dengan pemaparan, render(), dan ia adalah kaedah kosong tanpa sebarang logik dan tidak dirujuk di mana-mana sahaja ia untuk melaksanakan logik rendering kami sendiri.
Paparan mungkin mengandungi banyak logik antara muka Adalah disyorkan agar semua subkelas melihat melebihkan kaedah render() dan menggunakannya sebagai kaedah kemasukan untuk pemaparan akhir. Dalam pembangunan pasukan, pengekodan secara ketat mengikut spesifikasi boleh membantu orang lain memahami dan mengekalkan kod anda dengan lebih baik.