实例讲解JavaScript的Backbone.js框架中的View视图


Posted in Javascript onMay 05, 2016

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对象,并将事件处理函数绑定到事件名称中。这些操作都会在视图类被实例化时自动完成,我们可以更关心视图类本身的结构,而不是刻意地去考虑如何绑定事件。

你可能在担心另外一个问题:如果视图的DOM结构是动态生成的,Backbone是否提供了相应的方法用于动态绑定和解除事件?
其实你并不需要关心这个问题,因为events中的事件是通过delegate()方法绑定到视图对象的el元素上,而并非是选择器所描述的元素。因此视图内的结构无论如何变化,events中的事件都是有效的。
(如果你对jQuery比较熟悉,可能了解它所提供的delegate()方法。该方法实际上将事件绑定在父层元素,然后在事件冒泡过程中,通过检查目标子元素来触发事件。)
视图对象通过delegate()方法绑定事件,意味着我们不需要关心视图结构变化对事件产生的影响,同时也说明events中选择器所对应的元素必须处于视图的el元素之内,否则绑定的事件是无法生效的。

尽管如此,有些情况下可能我们仍然需要手动绑定和解除事件,视图对象提供了delegateEvents()和undelegateEvents()方法用于动态绑定和解除events事件列表,你可以通过查看API文档来了解它们。
渲染视图和数据
视图主要用于界面事件的绑定和数据渲染,然而视图对象仅仅提供了一个和渲染相关的方法render(),并且它是一个没有任何逻辑、也没有任何地方引用到的空方法,我们需要重载它来实现自己的渲染逻辑。
视图中可能包含许多界面逻辑,这里建议所有的视图子类都重载render()方法,并将它作为最终渲染的入口方法。在团队开发中,严格按照规范编码可以帮助别人更好地理解和维护你的代码。

Javascript 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 #Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 #Javascript
基于jQuery实现动态搜索显示功能
May 05 #Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 #Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 #Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 #Javascript
javascript执行环境及作用域详解
May 05 #Javascript
You might like
用ODBC的分页显示
2006/10/09 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
Yii2单元测试用法示例
2016/11/12 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
JS的数组迭代方法
2015/02/05 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue实现简单图片上传
2020/06/30 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python虚拟环境完美部署教程
2019/08/06 Python
Django如何重置migration的几种情景
2021/02/24 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
中东奢侈品市场:Coveti
2019/05/12 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
《藏戏》教学反思
2014/02/11 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
个人债务授权委托书
2014/10/17 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
格列夫游记读书笔记
2015/07/01 职场文书