backbone

Backbone 学习笔记 04

"Backbone 提供了一套完整的 MVC结构的 Web开发框架"

Posted by 刘一凡 on April 15, 2016

Backbone 学习笔记 04

视图

前面说的模型(Model)和集合(Collection), 都属于底层的数据处理, 真正的页面交互是视图(View), 它的核心功能是处理数据业务逻辑、绑定 DOM 元素事件、渲染模型或集合数据。

视图基础

在定义一个视图对象之前, 需要构建一个视图类。在构建类时, 可以设置 el 元素关联 DOM 中的元素; 也可以指定与视图相关的模型或集合类名, 实现各个类之间对象的数据互访问。

定义视图对象

先通过 extend 方法构建一个视图类, 再通过关键字 new 方法实例化视图对象, 在对象中可以调用视图类中的方法。

var testView = Backbone.View.extend({
  // 构建类的逻辑结构
  ...
});
// 根据构建的类实例化一个 test 视图对象
var test = new testView();

示例一 : 通过视图对象添加 DOM 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过视图对象添加 DOM 元素</title>
    <style>
    .cls_6{
      font-size: 12px;
    }
    </style>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://apps.bdimg.com/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script>
var testView = Backbone.View.extend({
  id : "show",
  className : "cls_6",
  render : function(content){
    this.el.innerHTML = content;
    document.body.appendChild(this.el);
  }
});
// 根据构建的类实例化一个 test 视图对象
var test = new testView();
test.render("我在学习Backbone！")
</script>
</body>
</html>

#### 视图对象访问模型对象

示例二 : 视图对象访问模型对象

<div id="show" class="cls_6"></div>
<script>
var student = Backbone.Model.extend({
  defaults : {
    Code : "",
    Name : "",
    Score : 0
  }
});
var stus = new student({
  Code : "10001",
  Name : "张三",
  Score : 120
});
var stusView = Backbone.View.extend({
  el : "#show",
  render : function(content){
    this.el.innerHTML = JSON.stringify(this.model);
  }
});
// 根据构建的类实例化一个 test 视图对象
var stuv = new stusView({ model : stus });
stuv.render();

视图对象访问集合对象

示例三 : 视图对象访问集合对象

var stumodels = [{
  Code : "10001",
  Name : "张三",
  Score : 120
}, {
  Code : "10002",
  Name : "李四",
  Score : 150
}];
var stuList = new Backbone.Collection(stumodels);
var stusView = Backbone.View.extend({
  el : "#show",
  render : function(content){
    var curlist = this.collection.models;
    for(var i = 0; i < curlist.length; i++){
      this.el.innerHTML += JSON.stringify(curlist[i]) + "<br />"
    }
  }
});
// 根据构建的类实例化一个 test 视图对象
var stuv = new stusView({ collection : stuList });
stuv.render();

视图的模板

视图中的模板分为两部分 :
第一部分在页面中使用 <script> 元素定义。定义时, 只要将元素的 type 属性设置为 text/template, 表明该元素包含的代码区域都为模板区。在模板区中, 采用 <%= 变量名称 %> 的形式定义变量, 并且可以处理业务逻辑。然后, 在 Javascript 代码中通过字典的方式传递给变量。
第二部分是在 JavaScript 代码中, 通过 _.template() 函数访问页面定义的模板内容, 当重载模板内容时, 可以通过字典的形式向模板中传递变量对应的值。

处理逻辑代码

使用 <script> 元素定义的页面模板区域中, 在 <% %> 区域内, <% %> 表示区别于其他 HTML 元素的特殊符号, = 表示取值, <%= %> 区域内的变量会在调用模板时, 被以字典方式传入的对应值所取代, 如果是字符内容则原样输出, <%= %> 区域内还是支持简单的 JavaScript 语句。

示例四 : 处理逻辑代码

<body>
<div id="score"></div>
<script type="text/template" id="score-tpl">
  <%= score >= 600 ? "优秀" : "及格" %>
</script>
<script>
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 }))
  }
});
var stuv = new stuView();
stuv.render(600);

显示多项内容的模板

示例五 : 显示多项内容的模板

var student = Backbone.Model.extend({
  defaults : {
    Code : "",
    Name : "",
    Score : 0
  }
});
var stus = new student({
  Code : "10001",
  Name : "张三",
  Score : 120
});
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()));
  }
});
var stuv = new stuView({ model : stus });
stuv.render();

视图中的元素事件

在构建视图类时, 可以添加一个 events 属性, 该属性的功能是将 DOM 与触发的事件和执行的函数相绑定, 事件绑定的格式如下 :

eventName element : function

视图中简单事件绑定

示例六 : 视图中简单事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视图中简单事件绑定</title>
    <style>
    body{
      font-size: 12px;
    }
    div{
      width: 260px;
      padding: 5px;
    }
    .changed{
      border: 1px solid #555;
    }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <script src="http://apps.bdimg.com/libs/backbone.js/1.0.0/backbone-min.js"></script>
</head>
<body>
<script>
  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");
    }
  });
  var stuv = new stuView();
</script>
</body>
</html>

绑定视图模板中多个事件

示例七 : 绑定视图模板中多个事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定视图模板中多个事件</title>
    <style>
    body{
      font-size: 12px;
    }
    div{
      width: 260px;
      padding: 5px;
    }
    .changed{
      border: 1px solid #555;
    }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <script src="http://apps.bdimg.com/libs/backbone.js/1.0.0/backbone-min.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/template" id="main-tpl">
  <div id="backbone"><%= mess %></div>
  <input type="button" value="点击一下" id="btnshow" />
</script>
<script>
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 #backbone" : "togglecls",
    "click #btnshow" : "toggleshow"
  },
  togglecls : function(){
    $("#backbone").toggleClass("changed");
  },
  toggleshow : function(){
    $("#backbone").toggle();
  }
});
var stuv = new stuView();
</script>
</body>
</html>

动态绑定和取消视图中的事件

除了构建视图类中, 通过添加 events 属性的方式声明绑定元素的事件之外, 视图内部提供了 delegateEvents 和 undelegateEvents 方法, 用于动态绑定和取消绑定元素的事件。
delegateEvent 方法的功能是重新绑定 events 属性值中已声明的全部元素事件, 其调用格式如下 :

delegateEvents([events])

undelegateEvent 方法的功能是取消所有已绑定元素的事件, 调用格式如下 :

undelegateEvent()

使用 Backbone 框架开发前端 Web 应用

通过前面的学习, 我们对框架 Backbone 框架的各个主要功能类模块有了一定了解, 总体来讲, Backbone 框架中的 model 对象表示数据模型, 用于定义数据结构; collection 对象是管理数据模型的集合, 用于保存数据或查找数据; view 对象主要功能是数据显示, 用于绑定 DOM 元素事件和处理页面逻辑。下面通过一个完整的例子, 详细介绍利用 Backbone 框架开发一个单页面应用。

1.功能描述

包含两个功能, 首先是数据录入功能, 在页面中添加3个文本输入框分别用于输入”编号”、”姓名”、”分数”; 添加一个提交按钮, 单击该按钮时, 将输入的数据以模型对象的方式添加到集合对象中。其次是数据显示功能, 当输入的数据添加完成之后, 将已添加的数据通过视图对象显示在页面的指定元素中。

2.实现代码

代码演示

FEATURED TAGS
生活 前端开发 Ajax backbone js 设计模式 移动端 nodejs