SpreadJS with Knockout
SpreadJS supports Knockout.
Knockout is a JavaScript MVVM library that makes it easier to create a rich, desktop-like user interface with JavaScript and HTML. Knockout uses observers to make the UI automatically stay in sync with the underlying data model, along with a powerful and extensible set of declarative bindings.
A Knockout binding consists of two items, the binding name, and value, separated by a colon. For example:
<span data-bind="text: myMessage"></span>SpreadJS requires custom bindings when using Knockout. Refer to https://knockoutjs.com/documentation for more information on custom bindings. The SpreadJS binding name is gc-spread-sheets.
The following code sample creates a custom binding. You can also add a valid SpreadJS license key before initializing the component, if available.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello SPJS Knockout</title> <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <script type='text/javascript' src='scripts/knockout-3.4.0.js'></script> <link href="css/gc.spread.sheets.x.x.x.css" rel="stylesheet" /> <script src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script> <script type="text/javascript"> // Licensing SpreadJS. GC.Spread.Sheets.LicenseKey = "xxx"; // Enter a valid license. // 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); }); </script> </head> <body> // Bind SpreadJS to the html element to use Knockout. <div id="ss" data-bind="gc-spread-sheets: { sheetCount: 1, tabStripVisible: true, 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:50%; height:200px;border: 1px solid gray;"> </div> </body> </html>