SpreadJS支持Knockout框架。
Knockout（以下简称KO）是什么？引用官方文档：KO是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新（比如：依赖于用户行为的改变或者外部的数据源发生变化），KO都可以很简单的帮你实现，并且非常易于维护。
每一个KO的绑定分为两个部分，名称与值，之间以冒号进行分割，例如：
<span data-bind="text: myMessage"></span>
SpreadJS（以下简称SJS）需要依赖Knockout的自定义绑定功能，参考：http://knockoutjs.com/documentation/custom-bindings.html 。SpreadJS的绑定名称为 gcspread-sheets （这个名称不能改变，SJS默认已经支持，无需重新注册绑定事件）。
以下是一个简单的例子：
//First define the binding value.
//Defines ViewModel
function Product(id, name, price, discontinued) {
this.id = ko.observable(id);
this.name = ko.observable(name);
this.price = ko.observable(price);
this.discontinued = ko.observable(discontinued);
}
var ViewModel = function (items) {
this.items = ko.observableArray(items);
};
//Creates ViewModel
var initialData = [
new Product(104, "Computers", 262, false),
new Product(95, "Washers", 709, true)
];
var viewModel = new ViewModel(initialData);
//Apply binding
$(function () {
ko.applyBindings(viewModel);
});
//Bind SpreadJS to the html element to use Knockout.
<div id="ss" data-bind="gcspread-sheets: {
sheetCount: 1,
tabStripVisible: false,
sheets: [
{
data: items,
columns: [
{ displayName: 'ID', name: 'id', size: 80},
{ displayName: 'Name', name: 'name', size: 120},
{ displayName: 'Price', name: 'price', size: 80},
{ displayName: 'Discontinued', name: 'discontinued', size: 120}
]
}
]
}" style="width:100%; height:400px;border: 1px solid gray;"></div>
另外有一点需注意，引入KO的js必须放在引入SJS的js之前，例如：
<script type="text/javascript" src="js/knockout-3.4.2.js"></script>
<script type="text/javascript" src="js/gc.spread.sheets.all.10.1.0.min.js"></script>
如上所示，否则会出现错误。
