Backbone.js框架中Model与Collection的使用实例

首先我们先来简单介绍一下Backbone.js框架。Backbone.js是一个轻量级的JavaScript框架，它提供了MVC（Model-View-Controller）的架构，方便我们在前端开发过程中管理数据状态和逻辑。在Backbone.js框架中，最常用的两个组件是Model和Collection。

Model：
Model是指一个数据模型，它相当于MVC架构中的M层，可以看作是应用程序中数据的集合。在Backbone.js框架中，Model提供了诸如数据的增删改查、数据验证等基本的数据操作方法。在一个Model中，可以定义一些基础属性和行为方法，类似于面向对象编程中的类。每个Model可以指定一个URL地址，用于同服务器进行数据交互。

Collection：
Collection是指一组数据模型的集合，它相当于MVC架构中的C层。一个Collection可以包含多个Model，它提供了类似于数据库的查询操作、排序、筛选等操作方法。Collection在数据方面可以看作是一个表的概念，需要考虑到增加、删除、修改、查找等对表进行操作的方法，且在与服务器交互方面也有针对Collection的操作，如保存、获取等。

接下来，我们来看两个使用Model和Collection的实例：

1. 处理一个任务清单：

我们假设有一个任务清单的网页，我们需要用Backbone.js框架来实现以下功能：

• 显示所有任务清单列表
• 添加新的任务
• 修改已有任务的状态，如标记为已完成
• 删除已有任务

可以看出，这个应用涉及到了数据的增删改查操作，非常适合使用Backbone.js的Model和Collection来实现。

首先，我们需要定义一个Task模型，它包含任务名、任务描述和任务状态三个属性。代码如下：

var Task = Backbone.Model.extend({
  defaults:{
    name: '',
    description: '',
    completed: false
  }
});

接下来，我们定义一个Tasks集合，用于管理所有的任务。代码如下：

var Tasks = Backbone.Collection.extend({
  model: Task,
  localStorage: new Backbone.LocalStorage('tasks-backbone'),
  completed: function() {
    return this.filter(function(task){ return task.get('completed'); });
  },
  remaining: function() {
    return this.without.apply(this, this.completed());
  },
  nextOrder: function() {
    if (!this.length) {
      return 1;
    }
    return this.last().get('order') + 1;
  },
  comparator: 'order'
});

在以上的代码中，我们通过新建一个Tasks集合来对所有任务进行管理。Tasks集合继承自Backbone.Collection，在集合中定义了许多常用方法，如filter（筛选）、withou（去除）、comparator（集合中的数据排序）方法，这些方法可以方便我们对集合数据进行操作。

1. 通过Backbone.js获取和展示电影信息

我们在开发一个电影信息网站，在网站中需要获取电影的名称、导演、演员等数据并展示出来。考虑到电影信息会不断增删改查，我们选择使用Backbone.js框架中的Model和Collection来对电影数据进行管理。代码如下：

// 定义Movie模型
var Movie = Backbone.Model.extend({
    defaults: {
        title: '',
        director: '',
        actors: '',
        year: ''
    }
});

// 定义Movies集合
var Movies = Backbone.Collection.extend({
    model: Movie,
    url: 'http://api.douban.com/v2/movie/top250?count=5'
});

// 获取数据，并展示到页面上
var movies = new Movies();
movies.fetch({
    success: function () {
        movies.each(function (movie) {
            var movieView = new MovieView({ model: movie });
            $('#movies-container').append(movieView.render().el);
        });
    }
});

// 定义MovieView视图
var MovieView = Backbone.View.extend({
    tagName: 'div',
    className: 'movie-item',
    template: _.template($('#tpl-movie').html()),
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

以上代码中，我们首先定义了一个Movie模型，它包含电影名称、导演、演员和年份等属性。接着，我们定义了一个Movies集合，用于管理所有的电影。集合中定义了url属性，表示从豆瓣API获取电影数据，每次最多获取5部电影。接下来，我们使用fetch方法从豆瓣API获取数据，然后利用each方法遍历所有电影，并实例化一个MovieView视图展示电影数据。

最后，我们定义了一个MovieView视图，用于展示电影信息。在视图中，我们使用了一个名为“tpl-movie”的模板，使用underscore.js中的_.template方法将数据渲染到模板中，最后将渲染好的HTML代码插入到页面中。

以上就是两个关于Backbone.js中Model和Collection的使用实例示例，它们涵盖了一些常见的应用场景。通过这些实例，我们可以更好地理解Model和Collection的作用，以及如何在Backbone.js框架中使用它们。