Backbone-Forms 使用与技术文档

1. 安装指南

在开始使用 backbone-forms 之前，请确保您的项目中已经包含 Backbone.js 库。以下是将 backbone-forms 集成到您的项目中的步骤：

• 将 backbone-forms 的 JavaScript 文件包含到您的 HTML 页面中：

  <script src="backbone-forms/distribution/backbone-forms.min.js"></script>
  

• 如果您需要使用额外的编辑器，例如 List 编辑器，您还需要包含相应的文件：

  <script src="backbone-forms/distribution/editors/list.min.js"></script>
  

• 如果您希望使用自定义模板包，如 Bootstrap，您需要在 backbone-forms.js 之后包含相关文件：

  <script src="backbone-forms/distribution/templates/bootstrap.js"></script>
  <link href="backbone-forms/distribution/templates/bootstrap.css" rel="stylesheet" />
  

• 如果您使用 Backbone 与 browserify 或 node.js，您可以在入口文件中通过 require('backbone-forms'); 来引入。在这种情况下，您需要设置 Backbone.$，例如 Backbone.$ = require('jquery');。

2. 项目的使用说明

backbone-forms 是一个灵活、可定制的表单框架，用于 Backbone.js 应用程序。以下是如何使用该框架的基本步骤：

• 定义一个 Backbone 模型，并为每个字段指定一个架构（schema）：

  var User = Backbone.Model.extend({
      schema: {
          title: { type: 'Select', options: ['Mr', 'Mrs', 'Ms'] },
          name: 'Text',
          email: { validators: ['required', 'email'] },
          birthday: 'Date',
          password: 'Password',
          address: { type: 'NestedModel', model: Address },
          notes: { type: 'List', itemType: 'Text' }
      }
  });
  

• 创建模型的一个实例，并使用该模型实例来创建一个表单：

  var user = new User();
  var form = new Backbone.Form({
      model: user
  }).render();
  

• 将渲染后的表单 DOM 元素添加到页面中：

  $('body').append(form.el);
  

当用户完成表单填写后，可以调用 form.commit() 方法来将更新的值应用到模型中。如果存在验证错误，它们将被返回。

3. 项目API使用文档

以下是 backbone-forms 的一些主要 API 方法：

• form.commit(): 将表单中的值应用到绑定的模型上。
• form.commit({ validate: true }): 在应用表单值之前执行模型和架构的验证。
• form.setValue({ field: value }): 在表单渲染后更新特定字段的值。
• form.getValue(): 获取表单中所有字段的当前值，不依赖于模型。

4. 项目安装方式

请参考上述“安装指南”部分，了解如何将 backbone-forms 集成到您的项目中。您可以通过直接在 HTML 中包含脚本来进行基本安装，或者通过模块打包工具如 browserify 进行安装。