From 260bb7014e7e1bd446ffe68c958dd52edcc42662 Mon Sep 17 00:00:00 2001
From: SheetJS <dev@sheetjs.com>
Date: Tue, 26 Jul 2022 15:24:43 -0400
Subject: [PATCH] knockout

---
 .../04-getting-started/03-demos/09-bundler.md |   4 +-
 .../04-getting-started/03-demos/12-legacy.md  |  94 +++++++++++++++
 .../docs/04-getting-started/03-demos/index.md |   2 +-
 docz/static/knockout/knockout.html            | 109 ++++++++++++++++++
 4 files changed, 206 insertions(+), 3 deletions(-)
 create mode 100644 docz/docs/04-getting-started/03-demos/12-legacy.md
 create mode 100644 docz/static/knockout/knockout.html

diff --git a/docz/docs/04-getting-started/03-demos/09-bundler.md b/docz/docs/04-getting-started/03-demos/09-bundler.md
index 626370e9..3ccaf606 100644
--- a/docz/docs/04-getting-started/03-demos/09-bundler.md
+++ b/docz/docs/04-getting-started/03-demos/09-bundler.md
@@ -205,7 +205,7 @@ $ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
 ```js title="esbrowser.js"
 // highlight-next-line
-import { set_fs, utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs';
+import { utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs';
 
 (async() => {
 /* fetch JSON data and parse */
@@ -461,7 +461,7 @@ $ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
 ```js title="index.js"
 // highlight-next-line
-import { set_fs, utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs';
+import { utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs';
 
 document.getElementById("xport").addEventListener("click", async() => {
 /* fetch JSON data and parse */
diff --git a/docz/docs/04-getting-started/03-demos/12-legacy.md b/docz/docs/04-getting-started/03-demos/12-legacy.md
new file mode 100644
index 00000000..830bbf62
--- /dev/null
+++ b/docz/docs/04-getting-started/03-demos/12-legacy.md
@@ -0,0 +1,94 @@
+---
+sidebar_position: 12
+title: Legacy Frameworks
+---
+
+import current from '/version.js';
+
+Over the years, many frameworks have been released. Some were popular years ago
+but have waned in recent years. There are still many deployments using these
+frameworks and it is oftentimes esasier to continue maintenance than to rewrite
+using modern web techniques.
+
+SheetJS libraries strive to maintain broad browser and JS engine compatibility.
+
+## Integration
+
+The ["Standalone Browser Scripts"](../../installation/standalone) section has
+instructions for obtaining or referencing the standalone scripts.  These are
+designed to be referenced with `<script>` tags.
+
+## Frameworks
+
+### KnockoutJS
+
+[KnockoutJS](https://en.wikipedia.org/wiki/Knockout_(web_framework)) was a
+popular MVVM framework.
+
+The [Live demo](pathname:///knockout/knockout.html) shows a view model that is
+updated with file data and exported to spreadsheets.
+
+
+#### State
+
+Arrays of arrays are the simplest data structure for representing worksheets.
+
+```js
+var aoa = [
+  [1, 2], // A1 = 1, B1 = 2
+  [3, 4]  // A1 = 3, B1 = 4
+];
+```
+
+`ko.observableArray` should be used to create the view model:
+
+```js
+function ViewModel() {
+  /* use an array of arrays */
+  this.aoa = ko.observableArray([ [1,2], [3,4] ]);
+}
+/* create model */
+var model = new ViewModel();
+ko.applyBindings(model);
+```
+
+`XLSX.utils.sheet_to_json` with `header: 1` generates data for the model:
+
+```js
+/* 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);
+```
+
+`XLSX.utils.aoa_to_sheet` generates worksheets from the model:
+
+```js
+var aoa = model.aoa();
+var ws = XLSX.utils.aoa_to_sheet(aoa);
+```
+
+#### Data Binding
+
+`data-bind="foreach: ..."` provides a simple approach for binding to `TABLE`:
+
+```html
+<table data-bind="foreach: aoa">
+  <tr data-bind="foreach: $data">
+    <td><span data-bind="text: $data"></span></td>
+  </tr>
+</table>
+```
+
+Unfortunately the nested `"foreach: $data"` binding is read-only.  A two-way
+binding is possible using the `$parent` and `$index` binding context properties:
+
+```html
+<table data-bind="foreach: aoa">
+  <tr data-bind="foreach: $data">
+    <td><input data-bind="value: $parent[$index()]" /></td>
+  </tr>
+</table>
+```
diff --git a/docz/docs/04-getting-started/03-demos/index.md b/docz/docs/04-getting-started/03-demos/index.md
index da95d39a..e1fbf700 100644
--- a/docz/docs/04-getting-started/03-demos/index.md
+++ b/docz/docs/04-getting-started/03-demos/index.md
@@ -20,7 +20,7 @@ The demo projects include small runnable examples and short explainers.
 
 - [`Angular.JS`](https://github.com/SheetJS/SheetJS/tree/master/demos/angular/)
 - [`Angular 2+ and Ionic`](https://github.com/SheetJS/SheetJS/tree/master/demos/angular2/)
-- [`Knockout`](https://github.com/SheetJS/SheetJS/tree/master/demos/knockout/)
+- [`Knockout`](./legacy#knockout)
 - [`Meteor`](https://github.com/SheetJS/SheetJS/tree/master/demos/meteor/)
 - [`React, React Native and NextJS`](https://github.com/SheetJS/SheetJS/tree/master/demos/react/)
 - [`VueJS, WeeX, and NuxtJS`](https://github.com/SheetJS/SheetJS/tree/master/demos/vue/)
diff --git a/docz/static/knockout/knockout.html b/docz/static/knockout/knockout.html
new file mode 100644
index 00000000..16fc1f85
--- /dev/null
+++ b/docz/static/knockout/knockout.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- xlsx.js (C) 2013-present  SheetJS http://sheetjs.com -->
+<!-- vim: set ts=2: -->
+<html ng-app="sjs">
+<head>
+  <title>SheetJS + KnockoutJS</title>
+  <!-- KnockoutJS -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
+
+  <!-- SheetJS js-xlsx library -->
+  <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script>
+  <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
+</head>
+<body>
+<pre>
+<b><a href="https://sheetjs.com">SheetJS + KnockoutJS demo</a></b>
+
+The core library can be used as-is in KnockoutJS applications.
+The <a href="https://docs.sheetjs.com">Community Edition README</a> details some common use cases.
+We also have some <a href="https://docs.sheetjs.com/docs/getting-started/demos/">more public demos</a>
+
+This demo shows:
+- view model backed by an array of arrays
+- file import that refreshes the model
+- table of editable `input` elements that are bound to the model
+- file export based on the model
+
+<a href="https://sheetjs.com/pres.xlsx">Sample Spreadsheet</a>
+</pre>
+
+<input name="xlfile" id="xlf"  class="left" style="width: 200px;" type="file">
+<table data-bind="foreach: aoa">
+    <tr data-bind="foreach: $data">
+      <td><input data-bind="value: $parent[$index()]"/></td>
+    </tr>
+</table>
+<script id='aoa' type="text/html"></script>
+<button id="export">Export Sheet to XLSX</button>
+
+</div>
+
+<script>
+/* knockout setup */
+function ViewModel() {
+  /* use an array of arrays */
+  this.aoa = ko.observableArray([
+    [1,2],
+    [3,4]
+  ]);
+}
+
+var model = new ViewModel();
+ko.applyBindings(model);
+/* do an update to confirm KO was loaded properly */
+model.aoa([[1,2,3],[4,5,6]]);
+model.aoa.push([7,8,9]);
+
+/* set up file input handler */
+(function() {
+  var input_dom_element = document.getElementById('xlf');
+  function handleFile(e) {
+    var files = e.target.files, f = files[0];
+    var reader = new FileReader();
+    reader.onload = function(e) {
+      var data = e.target.result;
+      data = new Uint8Array(data);
+      var workbook = XLSX.read(data, {type: 'array'});
+      process_wb(workbook);
+    };
+    reader.readAsArrayBuffer(f);
+  }
+  input_dom_element.addEventListener('change', handleFile, false);
+})();
+
+/* update model */
+function process_wb(wb) {
+  /* pull first worksheet */
+  var ws = wb.Sheets[wb.SheetNames[0]];
+  /* convert to AOA */
+  var aoa = XLSX.utils.sheet_to_json(ws, {header:1});
+  /* update model */
+  model.aoa(aoa);
+}
+
+document.getElementById("export").onclick = function() {
+  /* get array of arrays */
+  var data = model.aoa();
+  /* convert to worksheet */
+  var ws = XLSX.utils.aoa_to_sheet(data);
+  /* build new workbook */
+  var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
+  /* write file */
+  XLSX.writeFile(wb, "SheetJSKnockoutDemo.xlsx")
+};
+</script>
+<script type="text/javascript">
+/* eslint no-use-before-define:0 */
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', 'UA-36810333-1']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+</script>
+</body>
+</html>