Javascript MVC框架Backbone.js详解

Javascript MVC框架Backbone.js是一个轻量级的框架，它可以帮助我们快速构建单页应用程序(SPA)。它提供了一系列功能强大且灵活的工具，使得我们可以轻松管理前端应用程序中的模型(model)、视图(view)和集合(collection)。在这篇文章中，我们将详细讲解Backbone.js的完整攻略，并附带两个例子说明它的具体应用。

安装Backbone.js

使用Backbone.js前，我们需要下载并安装它。可以通过CDN引入它，也可以下载到本地文件中。例如：

<script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script>

Backbone.js依赖于Underscore.js，请务必在引入Backbone.js之前引入Underscore.js。

创建模型(Model)

Backbone.js中最重要的组件之一是模型(model)。一个模型代表着我们应用程序中的一个实体。例如，在一个博客应用程序中，可能会使用模型代表一篇文章。创建Backbone.js模型可以使用Backbone.Model构造函数。例如：

var BlogPostModel = Backbone.Model.extend({
   defaults: {
      title: "Untitled",
      content: "",
      publishedAt: new Date()
   }
});

这个BlogPostModel模型有一些默认值，即标题为"Untitled"，内容为空，并且默认发布时间为当前时间。现在我们可以随时使用这个模型来创建一个新博客文章。例如：

var newBlogPost = new BlogPostModel({
   title: "My first blog post",
   content: "Hello, world! This is my first blog post."
});

在这个示例中，我们创建了一个新的博客文章，并且设置了标题和内容。

创建集合(Collection)

Backbone.js中的另一个重要组件是集合(collection)。一个集合是一组模型的集合。例如，在博客应用程序中，集合可能是所有博客文章的集合。创建Backbone.js集合可以使用Backbone.Collection构造函数。例如：

var BlogPostsCollection = Backbone.Collection.extend({
   model: BlogPostModel
});

现在我们可以通过创建新的BlogPostModel实例，然后将它们添加到BlogPostsCollection集合中来构建博客文章的数据。例如：

var blogPosts = new BlogPostsCollection();
blogPosts.add(newBlogPost);

现在我们只需要执行blogPosts.models就可以获取当前博客文章的列表。

创建视图(View)

Backbone.js中的视图(view)负责呈现模板和响应用户事件。视图是与DOM元素相关联的，并且可以监听用户事件，例如点击按钮，然后更新模型。创建Backbone.js视图可以使用Backbone.View构造函数。例如：

var BlogPostView = Backbone.View.extend({
   tagName: "div",
   className: "blog-post",
   events: {
      "click button": "onButtonClick"
   },
   render: function () {
      this.$el.html("<h2>" + this.model.get("title") + "</h2><p>" + this.model.get("content") + "</p><button>Edit</button>");
      return this;
   },
   onButtonClick: function () {
      alert("You clicked the Edit button!");
   }
});

这个BlogPostView视图渲染了一个博客文章，并且包含一个"Edit"按钮。当按钮被点击时，将会出现一个警告弹框。现在我们可以创建一个BlogPostView实例，然后将其附加到文档中的某个元素中。例如：

var blogPostView = new BlogPostView({ model: newBlogPost });
$("#container").html(blogPostView.render().el);

这将会呈现我们的BlogPostView视图，并且显示在"id为container"的元素中。

例子1：TodoList应用程序

下面是一个使用Backbone.js创建TodoList应用程序的示例。这个应用程序包含一个TodoItem模型，并且包含一个TodoItems集合。此外，还有两个视图：TodoItemView，用于呈现TodoItem模型，并且处理用户与该模型的交互；TodoItemsView，用于呈现TodoItems集合，并且处理用户对整个集合的交互。

创建TodoItem模型

var TodoItemModel = Backbone.Model.extend({
   defaults: {
      title: "",
      isComplete: false
   }
});

创建TodoItems集合

var TodoItemsCollection = Backbone.Collection.extend({
   model: TodoItemModel
});

创建TodoItemView视图

var TodoItemView = Backbone.View.extend({
   tagName: "li",
   template: _.template($("#todoItemTemplate").html()),
   events: {
      "click .toggle": "onToggleClick"
   },
   render: function () {
      this.$el.html(this.template(this.model.toJSON()));
      return this;
   },
   onToggleClick: function () {
      this.model.set("isComplete", !this.model.get("isComplete"));
   }
});

创建TodoItemsView视图

var TodoItemsView = Backbone.View.extend({
   el: "#todoList",
   events: {
      "click #addTodoItemButton": "onAddTodoItemButtonClick"
   },
   initialize: function () {
      this.$list = this.$("#todoItemsList");
      this.listenTo(this.collection, "add", this.renderTodoItem);
   },
   render: function () {
      this.collection.forEach(this.renderTodoItem, this);
      return this;
   },
   renderTodoItem: function (todoItem) {
      var todoItemView = new TodoItemView({ model: todoItem });
      this.$list.append(todoItemView.render().el);
   },
   onAddTodoItemButtonClick: function () {
      var title = this.$("#newTodoItemTitle").val().trim();
      if (!title) {
         return;
      }
      var todoItem = new TodoItemModel({ title: title });
      this.collection.add(todoItem);
      this.$("#newTodoItemTitle").val("");
   }
});

var todoItems = new TodoItemsCollection();
var todoItemsView = new TodoItemsView({ collection: todoItems });
todoItemsView.render();

HTML模板

<div id="todoList">
   <h2>Todo List</h2>
   <ul id="todoItemsList"></ul>
   <div>
      <input type="text" id="newTodoItemTitle" placeholder="New todo item title">
      <button id="addTodoItemButton">Add</button>
   </div>
</div>

<script type="text/template" id="todoItemTemplate">
   <label>
      <input type="checkbox" class="toggle" <%= isComplete ? 'checked' : '' %>> <%= title %>
   </label>
</script>

例子2：天气应用程序

下面是一个使用Backbone.js创建简单天气应用程序的示例。这个应用程序包含一个WeatherModel模型，并且包含一个WeatherView视图，用于呈现天气数据。

创建WeatherModel模型

var WeatherModel = Backbone.Model.extend({
   url: function () {
      return "http://api.openweathermap.org/data/2.5/weather?q=" + this.get("city") + "&appid=YOUR_APP_ID"
   },
   parse: function (response) {
      return {
         city: this.get("city"),
         temperature: response.main.temp,
         description: response.weather[0].description
      };
   }
});

创建WeatherView视图

var WeatherView = Backbone.View.extend({
   el: "#weather",
   template: _.template($("#weatherTemplate").html()),
   events: {
      "submit form": "onFormSubmit"
   },
   initialize: function () {
      this.listenTo(this.model, "sync", this.render);
   },
   render: function () {
      this.$el.html(this.template(this.model.toJSON()));
      return this;
   },
   onFormSubmit: function (event) {
      event.preventDefault();
      var city = this.$("#city").val().trim();
      if (!city) {
         return;
      }
      this.model.set("city", city);
      this.model.fetch();
   }
});

var weatherModel = new WeatherModel({ city: "Beijing" });
var weatherView = new WeatherView({ model: weatherModel });
weatherView.render();

HTML模板

<div id="weather">
   <h2>Weather</h2>
   <form>
      <input type="text" id="city" placeholder="City name">
      <button type="submit">Get weather</button>
   </form>
   <p><%= city %>: <%= temperature %> K, <%= description %></p>
</div>

<script type="text/template" id="weatherTemplate">
   <p><%= city %>: <%= temperature %> K, <%= description %></p>
</script>

这就是Backbone.js的完整攻略。希望本文可以帮助你更好地使用Backbone.js框架构建强大的Web应用程序。