Knockoutの使用

Spread.SheetsはKnockoutをサポートします。

KnockoutはJavaScript MVVMライブラリであり、これを使用することで、JavaScript、HTMLによるリッチなデスクトップ型のユーザーインタフェースを容易に作成できます。 Knockoutではオブザーバを使用して、UIを基底のデータモデルと自動同期させますが、他にも、強力で拡張的な宣言型バインド機能を多数備えています。

Knockoutでのバインドでは、バインド名と値という2つのアイテムを、コロンで区切って指定します。次に、例を示します。

<span data-bind="text: myMessage"></span>

Spread.Sheetsでは、Knockoutを使用する場合にカスタムバインドが必要となります。カスタムバインドの詳細については、http://knockoutjs.com/documentationを参照してください。 Spread.Sheetsのバインド名はwijspreadとなります。

コードの使用

次のサンプルコードは、カスタムバインドを作成します。

JavaScript	コードのコピー
// バインドする値を最初に定義します。 // 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>

JavaScript

コードのコピー

// バインドする値を最初に定義します。
    // 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>