From ddeec2c813e62e92bbb3cd5706f5a690c7f66b91 Mon Sep 17 00:00:00 2001
From: Pavel Reznikov <pashka.reznikov@gmail.com>
Date: Tue, 11 Nov 2014 19:24:48 -0800
Subject: [PATCH] knockout.js sample

---
 README.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/README.md b/README.md
index 7f2a26e..30f5745 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,55 @@ Usage
 Coming soon...
 
 
+## Use with knockout.js
+
+```javascript
+ko.components.register('dashboard-grid', {
+    viewModel: {
+        createViewModel: function (params, componentInfo) {
+            var ViewModel = function (params, componentInfo) {
+                var grid = null;
+
+                this.widgets = params.widgets;
+
+                this.afterAddWidget = function (items) {
+                    _.each(items, function (item) {
+                        item = $(item);
+                        if (item.data('_gridstack_node'))
+                            return;
+
+                        if (grid == null) {
+                            grid = $(componentInfo.element).find('.grid-stack').gridstack({
+                                auto: false
+                            }).data('gridstack');
+                        }
+
+                        grid.add_widget(item);
+                    }, this);
+                };
+
+            };
+
+            return new ViewModel(params, componentInfo);
+        }
+    },
+    template: [
+        '<div class="grid-stack">',
+        '   <!-- ko foreach: widgets, afterRender: afterAddWidget -->',
+        '       <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': x, \'data-gs-y\': y, \'data-gs-width\': width, \'data-gs-height\': height}"><span data-bind="text: $index"></span></div>',
+        '   <!-- /ko -->',
+        '</div>'
+    ].join('\n')
+});
+```
+
+and HTML:
+
+```html
+<div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
+```
+
+
 License
 =======