Knockback.js 技术文档

1. 安装指南

1.1 通过 npm 安装

npm install knockback

1.2 通过 Bower 安装

bower install knockback

1.3 手动下载

你可以从以下地址手动下载 Knockback.js 的最新版本：

• 完整库 (开发版, 64k)
• 完整库 (压缩版, 8k)
• 核心库 (开发版, 54k)
• 核心库 (压缩版, 7k)

1.4 依赖项

确保你已经安装了以下依赖库：

• Backbone.js
• Knockout.js
• Underscore.js 或 LoDash

2. 项目的使用说明

2.1 简单示例

HTML 代码

<label>First Name: </label><input data-bind="value: first_name, valueUpdate: 'keyup'" />
<label>Last Name: </label><input data-bind="value: last_name, valueUpdate: 'keyup'" />

JavaScript 代码

var model = new Backbone.Model({first_name: 'Bob', last_name: 'Smith'});
ko.applyBindings(kb.viewModel(model));

在这个示例中，当你在输入框中输入内容时，值会双向同步到模型中，并且所有绑定的视图模型也会更新。

2.2 高级示例

视图模型代码

var ContactViewModel = kb.ViewModel.extend({
  constructor: function(model) {
    kb.ViewModel.prototype.constructor.call(this, model);

    this.full_name = ko.computed(function() {
      return this.first_name() + " " + this.last_name();
    }, this);
  }
});

HTML 代码

<h1 data-bind="text: 'Hello ' + full_name()"></h1>
<label>First Name: </label><input data-bind="value: first_name, valueUpdate: 'keyup'" />
<label>Last Name: </label><input data-bind="value: last_name, valueUpdate: 'keyup'" />

JavaScript 代码

var model = new Backbone.Model({first_name: 'Bob', last_name: 'Smith'});
var view_model = new ContactViewModel(model);
ko.applyBindings(view_model);

// 清理
kb.release(view_model);

在这个示例中，当你在输入框中输入内容时，问候语会实时更新。

3. 项目API使用文档

3.1 kb.viewModel

kb.viewModel 是一个用于创建视图模型的函数。它将 Backbone 模型转换为 Knockout 视图模型，从而可以在 HTML 中使用 data-bind 属性进行绑定。

3.2 kb.ViewModel.extend

kb.ViewModel.extend 用于扩展视图模型类。你可以通过继承 kb.ViewModel 来创建自定义的视图模型类。

3.3 ko.computed

ko.computed 是一个 Knockout 的计算属性，它可以根据其他属性的变化自动更新。

3.4 kb.release

kb.release 用于释放视图模型，清理绑定和事件监听器，避免内存泄漏。

4. 项目安装方式

4.1 通过 npm 安装

npm install knockback

4.2 通过 Bower 安装

bower install knockback

4.3 手动下载

你可以从以下地址手动下载 Knockback.js 的最新版本：

• 完整库 (开发版, 64k)
• 完整库 (压缩版, 8k)
• 核心库 (开发版, 54k)
• 核心库 (压缩版, 7k)

4.4 依赖项

确保你已经安装了以下依赖库：

• Backbone.js
• Knockout.js
• Underscore.js 或 LoDash