backbone.js 教程(1) View & Model & Collection

Backbone.js Overview

它由Jeremy Ashkenas开发，最初发行于2010-10-13
它是一个轻量的JavaScript类库，只依赖于underscore.js，非强制依赖于jquery，大小只有7.6Kb，作为一个框架级的js文件，它已经非常小了
它提供了Model-View-Presenter(MVP)的框架模式，可以帮助前端开发搭建一个层次清晰的Web应用框架
它提供了models和collections来封装数据结构，提供了views来操作DOM，提供了自定义事件将数据结构和DOM操作绑定在一起

Environment Setup

要完整使用BackboneJS，需要引入以下js

Underscore.js(>= 1.8.3)或者lodash.js
Jquery.js(>= 1.11.0)
Json2.js(如果需要支持IE)

在没有npm的环境下，可以下载压缩包或者使用CDN。

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

Bakbone.js View

负责操作DOM,采用 OO 的思想来操作一个视图。

Backbone.js View API

extend 每一个自定义的View都必须由Backbone.View类extend而来，override父类中的属性
initialize() View的构造函数，每当new一个实例时，就会调用该方法
render() 通常将view的渲染逻辑写在此方法中，并在initialize中调用它
template() View渲染时的模板，可以使用underscore的模板，也可以使用其他任意JS模板引擎
el View对应的DOM对象，可以使用id选择器，类选择器来定义
$el View对应的jQuery对象，方便使用jQuery的方法来操作DOM
tagName View对应的DOM节点的标签名称，默认是“div”
id View对应的DOM节点的id属性
className View对应的DOM节点的class属性
events 给View绑定事件
remove() 移除一个view，其el将从DOM中移出，绑定的事件也将停止监听

Create a View

只需要扩展视图构造函数 Backbone.View, 传入Dom相关的属性。

示例假如，需要在DOM中动态添加一个id=“root”的div。

不使用backbone.js，我们通常这样实现。

// app.js
function addRoot() {
  var el = document.createElement('div');
  el.id = 'root';
  el.innerHTML = 'Hello Backbone!!!';
  document.body.appendChild(el);
}
addRoot();

使用backbone.js，我们这样实现：

// app.js
var AppView = Backbone.View.extend({
  tagName: 'div',
  id: 'root',
  initialize: function () {
    this.render();
  },
  render: function () {
    this.el.innerHTML = 'Hello Backbone!!!';
    return this;
  }
});

var appView = new AppView();
document.body.appendChild(appView.el);

tagName 指定这个element 是一个div
id 指定这个div的id属性值
当调用 new AppView() 时，执行initialize() 函数
render() 函数用于渲染这个element

Get Existed Element

假如，在html中已经定义了div#root这个element，想修改它的内容。

使用Backbone.js怎么来操作这个element呢？

// index.html
<body>
  <div id="root">loading...</div>
</body>

var AppView = Backbone.View.extend({
  el: '#root',
  initialize: function () {
    this.render();
  },
  render: function () {
    this.el.innerHTML = 'Hello Backbone!!!';
    return this;
  }
});
var appView = new AppView();

Bind events

格式：

events: {
    'event1 selector1': 'function name1',
    'event2 selector2': 'function name2',
        ...
}

示例有这样一个小应用，在input中输入后，回车，添加一个new goal；点击每一个goal后面的remove，移除此项目。

// index.html
<div id="root" class="color-dark">
  <header>
    <h2>My Life Goals</h2>
    <input id="new-goal" type="text" placeholder="add a new goal">
  </header>
  <ul id="goal-list">
    <li class="goal-item">Goal one <a class="btn-remove">remove</a></li>
    <li class="goal-item">Goal two <a class="btn-remove">remove</a></li>
    <li class="goal-item">Goal three <a class="btn-remove">remove</a></li>
    <li class="goal-item">Goal four <a class="btn-remove">remove</a></li>
  </ul> 
</div>

给input绑定一个 keypress 事件
给每一个 .btn-remove 绑定一个click事件

// app.js
var AppView = Backbone.View.extend({
  el: '#root',
  … …
  events: {
    'keypress #new-goal': 'addGoal',
    'click .btn-remove': 'clear',
  },
  addGoal: function(ev) {
    if (ev.keyCode != 13) return;
    console.log('addGoal');
    // To do
  },
  clear: function() {
    // To do
  }
});
var appView = new AppView;

How to change view

在引入Backbone.js的Model之前，我们可以这样来实现 addGoal 方法。

addGoal: function(ev) {
  if (ev.keyCode != 13) return;
  var newGoal = $('#new-goal').val();
  if(newGoal === '') return;
  var goalHtml = '<li class="goal-item">'+   newGoal +'<a class="btn-remove">remove</a></li>';
  $('#goal-list').append(goalHtml);
  $('#new-goal').val('');
}

在Backbone.js 出现之前，当数据发生变化视图需要重新渲染时，我们通常使用js或jQuery来进行DOM操作，改变展示的内容。

这样做data和视图渲染混在一起，显得很乱；而且，如果视图上要显示的属性很多，拼接的代码就很长很长。

所以，使用Backbone.js 的Model和Collection 将data和View 进行分离。

Bakbone.js Model & Collection

Model的作用

封装数据结构
处理业务逻辑
从server 加载、保存数据
当data发生变化时触发事件，比如重新渲染视图

Collection的作用

Collection是Model的有序集合，和Model一样用于数据加载、保存，监听数据变化，还可以使用 Underscore.js 提供的方法来操作Collection。

主要适用于list、table等视图的渲染。在本例中，就需要定义一个Collection来渲染列表，并监听Collection的变化。

定义Model和Collection

// Goal Model
var Goal = Backbone.Model.extend({
  defaults: {
    title: ''
  }
});

// Goal Collection
var GoalCollection = Backbone.Collection.extend({
  model: Goal,
});

使用template

下面这段代码，有一些地方是相同的，为了避免重复代码，可以使用模板来渲染。

<ul id="goal-list">
    <li class="goal-item">Goal one <a class="btn-remove">remove</a></li>
    <li class="goal-item">Goal two <a class="btn-remove">remove</a></li>
    <li class="goal-item">Goal three <a class="btn-remove">remove</a></li>
    <li class="goal-item">Goal four <a class="btn-remove">remove</a></li>
  </ul>

在html中定义模板

把重复的部分抽出来，定义模板时使用<script>标签，但这里的type是text/template，然后给它一个id，用于在View中通过id来获取它。

<body>
  <div id="root" class="color-dark">
    <header>
      <h2>My Life Goals</h2>
      <input id="new-goal" type="text" placeholder="add a new goal">
    </header>
    <ul id="goal-list">
      <!-- template -->
    </ul>
    </div>

  <script type="text/template" id="item-template">
    <li class="goal-item"><%= title %><a class="btn-remove">remove</a></li>
  </script>
</body>

<%= %>表示插入变量
<% %>表示插入任意JS代码段
<%- %>表示插值并进行转义

View中定义解析函数template()

在js中定义GoalView，用于生成每一个Goal对应的<li>节点。

BackboneJS中的template实际上调用的是underscore.js的template方法，该方法可以将 JavaScript 模板编译为可以用于页面呈现的函数，它返回的是一个函数。

_.template(templateString, [settings])

render时调用template

然后在render中调用template方法，把model对象作为参数传入。

// app.js

// Goal Model
var GoalModel = Backbone.Model.extend({
  defaults: {
    title: '' // 默认属性值
  }
});

// Goal Collection
var GoalCollection = Backbone.Collection.extend({
  model: GoalModel,
});

var GoalView = Backbone.View.extend({
  tagName: 'li',
  initialize: function () {
    this.render();
  },
  template: function () {
    return _.template($('#item-template').html()); //根据模板的id来获取模板定义的内容
  },
  render: function () {
    this.$el.html(this.template()(this.model.toJSON()));
  },
  events: {    
    'click .btn-remove': 'clear', // 绑定事件
  },
  clear: function() {
    // To do
  }
});

var AppView = Backbone.View.extend({
  el: '#root',
  … …
  events: {
    'keypress #new-goal': 'addGoal',
  },
  addGoal: function(ev) {
    if (ev.keyCode != 13) return;
    console.log('addGoal');
    // To do
  },
  
});

测试效果：

var view = new GoalView({ model: {title: 'My first goal'} });
this.$("#goal-list").append(view.$el);

bind Collection to View

在AppView中，修改addGoal的添加模式，将原来的直接操作DOM，修改为通过data的变化来触发DOM的渲染。

在AppView中实例化一个GoalCollection，命名为goalList
Keypress事件触发时，修改goalList，这里调用了Backbone.Collection中的push()方法

var AppView = Backbone.View.extend({
  el: '#root',
  initialize: function () {
    this.goalList = new GoalCollection(); 
    this.render();
},
  render: function () {
    return this;
  },
  events: {
   'keypress #new-goal': 'addGoal'
  },
  addGoal: function (ev) {
    if (ev.keyCode != 13) return;
    var inputVal = $('#new-goal').val(); // 获取输入的值
    if (inputVal === '') return;
    this.goalList.push({ title: inputVal }); // push到Collection
    $('#new-goal').val('');
  },
});

但是，此时，你会发现虽然goalList发生了变化，但是页面并没有跟着渲染。

因为，View并没有对Collection的变化进行监听。

Model 和 Collection的事件监听

View 监听 Model或Collection的变化

在AppView中，通过listenTo()方法，监听Collection的变化，当Collection发生变化时，触发内部的某个方法。

object.listenTo(other, event, callback)

listenTo 用于一个对象，监听另一个对象的变化

停止监听使用stopListening

object.stopListening([other], [event], [callback])

监听add事件

var AppView = Backbone.View.extend({
    el: '#root',
    initialize: function () {
        this.goalList = new GoalCollection();
        this.render();
        this.listenTo(this.goalList, 'add', this.addOne);
        // or 
        // this.goalList.on('add', this.addOne, this);
    },
    render: function () {
        return this;
    },
    events: {
        'keypress #new-goal': 'addGoal'
    },
    addGoal: function (ev) {
        if (ev.keyCode != 13) return;
        var inputVal = $('#new-goal').val();
        if (inputVal === '') return;
        this.goalList.push({ title: inputVal });
        // or this.goalList.add({ title: inputVal });

        $('#new-goal').val('');
    },
    addOne: function (goal) {
        var view = new GoalView({ model: goal });
        this.$("#goal-list").append(view.$el);
    }
});

这里为什么监听的event是 add，而不是 push?

因为push()方法底层其实调用的是add()方法。

this.goalList.push({ title: inputVal });

修改为

this.goalList.add({ title: inputVal });

效果相同

监听destroy事件

在上一步中，已经给GoalView绑定了Goal这个Model，那么在View中就可以使用Model来控制View的渲染。在GoalView中需要监听GoalModel的变化，goalModel移除时，销毁视图。

var GoalView = Backbone.View.extend({
    tagName: 'li',
    initialize: function () {
        this.render();
        this.listenTo(this.model, 'destroy', this.remove);
        //or this.model.on('destroy', this.remove, this);
    },
    template: function () {
        return _.template($('#item-template').html());
    },
    render: function () {
        console.log('model', this.model.toJSON());
        this.$el.html(this.template()(this.model.toJSON()));
    },
    events: {
        'click .btn-remove': 'clear',
    },

    clear: function() {
        this.model.destroy(); 
    }
});

destroy model后，view 也会从DOM中移除，同时绑定的事件也会停止监听。

this.remove 是View 内置的函数。

remove()方法不仅可以从DOM中移除view对应的节点，同时还能停止节点上绑定的事件监听。

Model或Collection 自我监听变化

在AppView中，还可以通过调用on()方法，让Collection监听自己的变化。

object.on(event, callback, [context])

这种用法是自己监听自己。

如果想停止监听，使用off()方法

object.off([event], [callback], [context])

this.listenTo(this.goalList, 'add', this.addOne);

等效于

this.goalList.on('add', this.addOne, this);

this.listenTo(this.model, 'destroy', this.remove);

等效于

this.model.on('destroy', this.remove, this);

为什么要传入context?

因为调用on()方法的是this.goalList，如果不传入context，那么在addOne()调用时，默认的this指代的是this.goalList，而不是AppView的实例了。

因此，为了保证上下文都是View的实例，需要传入context。

使用 bind() 或 bindAll() 修改context

可以在使用on()时，不传入context，而使用 _.bind() 或 _.bindAll() 来绑定context

在使用bind时，必须使用bind返回的函数

// 使用 bind
initialize: function () {
    this.render();
    this.remove = _.bind(this.remove, this); // 返回值是一个函数
    this.model.on('destroy', this.remove);
},

使用bindAll非常方便，不必考虑返回值

// 使用 bindAll
initialize: function () {
    this.render();
    _.bindAll(this, 'remove', 'clear'); // 可以同时改变多个函数的context
    this.model.on('destroy', this.remove);
},