Simple list component with array watching

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>

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();
                 }

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": "*"
   }
 }