From 6cb98e516f02075f50f7dc7597e97361df41d0c7 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 15 Apr 2016 11:30:10 +0100
Subject: [PATCH] Simple list component with array watching

---
 demo-shell-ng2/app/components/page2.view.ts            |  4 ++++
 .../app/web-components/simple-list/simple-list.html    | 10 +++++++---
 demo-shell-ng2/bower.json                              |  4 +++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/demo-shell-ng2/app/components/page2.view.ts b/demo-shell-ng2/app/components/page2.view.ts
index 96fd69471a..8bcebc793c 100644
--- a/demo-shell-ng2/app/components/page2.view.ts
+++ b/demo-shell-ng2/app/components/page2.view.ts
@@ -12,6 +12,10 @@ import {Component} from "angular2/core";
                 <hello-world text="test user"></hello-world>
             </div>
             <div class="row">
+                <p>
+                    List below is a web component bound to array of items coming from angular.<br>
+                    Add/remove buttons control angular array and web component reacts on changes.
+                </p>
                 <simple-list [items]="items"></simple-list>
                 <button (click)="addItem()">add item</button>
                 <button (click)="removeItem()">remove item</button>
diff --git a/demo-shell-ng2/app/web-components/simple-list/simple-list.html b/demo-shell-ng2/app/web-components/simple-list/simple-list.html
index fee3478071..6320bd686f 100644
--- a/demo-shell-ng2/app/web-components/simple-list/simple-list.html
+++ b/demo-shell-ng2/app/web-components/simple-list/simple-list.html
@@ -1,3 +1,6 @@
+<script src="/bower_components/underscore/underscore-min.js"></script>
+<script src="/bower_components/underscore-observable-arrays/underscore-observe.js"></script>
+
 <!-- Defines element markup -->
 <template>
     <ul id="list"></ul>
@@ -31,11 +34,12 @@
                     };
                     */
 
-                    /*
+                    var self = this;
+                    // TODO: unobserve for old _items value if needed
                     _.observe(_items, function(new_array, old_array) {
-
+                        _items = new_array || [];
+                        self._render();
                     });
-                    */
 
                     this._render();
                 }
diff --git a/demo-shell-ng2/bower.json b/demo-shell-ng2/bower.json
index bb71d6c17f..8c69ad73a6 100644
--- a/demo-shell-ng2/bower.json
+++ b/demo-shell-ng2/bower.json
@@ -31,6 +31,8 @@
     "paper-toolbar": "~1.1.4",
     "iron-signals": "~1.0.3",
     "paper-item": "~1.1.4",
-    "paper-dropdown-menu": "~1.1.3"
+    "paper-dropdown-menu": "~1.1.3",
+    "underscore": "^1.8.3",
+    "underscore-observable-arrays": "*"
   }
 }