1.7 KiB
1.7 KiB
Knockout
The xlsx.core.min.js
and xlsx.full.min.js
scripts are designed to be dropped
into web pages with script tags:
<script src="xlsx.full.min.js"></script>
Strictly speaking, there should be no need for a Knockout demo! You can proceed as you would with any other browser-friendly library.
Array of Arrays
A common data table is often stored as an array of arrays:
var aoa = [ [1,2], [3,4] ];
This neatly maps to a table with data-bind="foreach: ..."
:
<table data-bind="foreach: aoa">
<tr data-bind="foreach: $data">
<td><span data-bind="text: $data"></span></td>
</tr>
</table>
The sheet_to_json
utility function can generate array of arrays for model use:
/* starting from a `wb` workbook object, pull first worksheet */
var ws = wb.Sheets[wb.SheetNames[0]];
/* convert the worksheet to an array of arrays */
var aoa = XLSX.utils.sheet_to_json(ws, {header:1});
/* update model */
model.aoa(aoa);
Demo
The easiest observable representation is an observableArray
:
var ViewModel = function() { this.aoa = ko.observableArray([[1,2],[3,4]]); };
var model = new ViewModel();
ko.applyBindings(model);
Unfortunately the nested "foreach: $data"
binding is read-only. A two-way
binding is possible using the $parent
and $index
binding context properties:
<table data-bind="foreach: aoa">
<tr data-bind="foreach: $data">
<td><input data-bind="value: $parent[$index()]" /></td>
</tr>
</table>
The demo shows reading worksheets into a view model and writing models to XLSX.