使用Backbone.js创建前端Web应用的MVC架构

Backbone.js是一个流行的JavaScript框架，用于构建前端Web应用的MVC（Model-View-Controller）架构。这个示例将介绍如何使用Backbone.js构建一个简单的任务列表应用，以及相关的技术解答。

// 创建任务模型
var Task = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  }
});

// 创建任务集合
var TaskList = Backbone.Collection.extend({
  model: Task
});

// 创建任务视图
var TaskView = Backbone.View.extend({
  tagName: 'li',
  template: _.template($('#task-template').html()),
  render: function () {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

// 创建任务列表视图
var TaskListView = Backbone.View.extend({
  el: '#tasks',
  initialize: function () {
    this.collection = new TaskList(tasks);
    this.render();
  },
  render: function () {
    this.collection.each(function (task) {
      var taskView = new TaskView({ model: task });
      this.$el.append(taskView.render().el);
    }, this);
  }
});

var tasks = [
  { title: '学习Backbone.js', completed: false },
  { title: '构建Web应用', completed: true }
];

var taskListView = new TaskListView();

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com