Knockout
SpreadJSはKnockoutをサポートします。
KnockoutはJavaScript MVVMライブラリであり、これを使用することで、JavaScript、HTMLによるリッチなデスクトップ型のユーザーインタフェースを容易に作成できます。 Knockoutではオブザーバを使用して、UIを基底のデータモデルと自動同期させますが、他にも、強力で拡張的な宣言型バインド機能を多数備えています。
Knockoutでのバインドでは、バインド名と値という2つのアイテムを、コロンで区切って指定します。 次に、例を示します。
<span data-bind="text: myMessage"></span>
SpreadJSでは、Knockoutを使用する場合にカスタムバインドが必要となります。 カスタムバインドの詳細については、https://knockoutjs.com/documentationを参照してください。 Spread.Sheetsのバインド名はwijspreadとなります。
コードの使用
次のサンプルコードは、カスタムバインドを作成します。
// バインドする値を最初に定義します。
// 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);
};
// ViewModelを作成します。
var initialData = [
new Product(104, "Computers", 262, false),
new Product(95, "Washers", 709, true)
];
var viewModel = new ViewModel(initialData);
// バインドを適用します。
$(function () {
ko.applyBindings(viewModel);
});
// Knockoutを使用できるように、Spread.SheetsをHTML要素にバインドします。
<div id="ss" data-bind="gc-spread-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>