Stub for list web component experiments

demo-shell-ng2/app/components/page2.view.ts

@@ -4,15 +4,30 @@ import {Component} from "angular2/core";
     template: `
         <div class="container">
             <div class="row">
-                <h1>Page 2</h1>
                 <input [(ngModel)]="username">
                 <span>Username: {{username}}</span>
-                <hello-world [text]="username"></hello-world>
+                <hello-world [text]="username">
+                    <button>{{'interpolation: ' + username}}</button>
+                </hello-world>
                 <hello-world text="test user"></hello-world>
             </div>
+            <div class="row">
+                <simple-list [items]="items"></simple-list>
+                <button (click)="addItem()">add item</button>
+                <button (click)="removeItem()">remove item</button>
+            </div>
         </div>
     `
 })
 export class Page2View {
     username: string = 'Unicorn';
+    items = ['one', 'two', 'three'];
+
+    addItem() {
+        this.items.push('test');
+    }
+
+    removeItem() {
+        this.items.pop();
+    }
 }

demo-shell-ng2/app/web-components/helloworld/helloworld.html

@@ -1,6 +1,7 @@
 <!-- Defines element markup -->
 <template>
     <p>Hello <strong></strong> :)</p>
+    <content></content>
 </template>
 
 <script>
@@ -26,9 +27,6 @@
             }
         });
 
-        // Creates the "who" attribute and sets a default value
-        MyElementProto.who = 'World';
-
         // Fires when an instance of the element is created
         MyElementProto.createdCallback = function() {
             // Creates the shadow root

demo-shell-ng2/app/web-components/simple-list/simple-list.html

@@ -0,0 +1,83 @@
+<!-- Defines element markup -->
+<template>
+    <ul id="list"></ul>
+</template>
+
+<script>
+    (function (window, document, undefined) {
+        // Refers to the "importer", which is index.html
+        var thatDoc = document;
+
+        // Refers to the "importee", which is src/hello-world.html
+        var thisDoc =  (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;
+
+        // Gets content from <template>
+        var template = thisDoc.querySelector('template').content;
+
+        var _items;
+
+        // Creates an object based in the HTML Element prototype
+        var element = Object.create(HTMLElement.prototype, {
+            items: {
+                get: function() { return _items; },
+                set: function(newValue) {
+                    _items = newValue || [];
+
+                    /*
+                    var self = this;
+                    _items.push = function () {
+                        Array.prototype.push.apply(this, arguments);
+                        self._render();
+                    };
+                    */
+
+                    /*
+                    _.observe(_items, function(new_array, old_array) {
+
+                    });
+                    */
+
+                    this._render();
+                }
+            }
+        });
+
+        // Fires when an instance of the element is created
+        element.createdCallback = function() {
+            // Creates the shadow root
+            var shadowRoot = this.createShadowRoot();
+            // Adds a template clone into shadow root
+            var clone = thatDoc.importNode(template, true);
+            shadowRoot.appendChild(clone);
+
+            this.list = shadowRoot.getElementById('list');
+            // Caches <strong> DOM query
+            //this.strong = shadowRoot.querySelector('strong');
+
+            this._render()
+        };
+
+        // Fires when an attribute was added, removed, or updated
+        element.attributeChangedCallback = function(attr, oldVal, newVal) {
+//            if (attr === 'text') {
+//                this.setText(newVal);
+//            }
+        };
+
+        element._render = function() {
+            this.list.innerHTML = '';
+            if (_items && _items.length > 0) {
+                for (var i = 0; i < _items.length; i++) {
+                    var item = document.createElement('div');
+                    item.textContent = 'item ' + i;
+                    this.list.appendChild(item);
+                }
+            }
+        };
+
+        // Registers <hello-world> in the main document
+        window.SimpleList = thatDoc.registerElement('simple-list', {
+            prototype: element
+        });
+    })(window, document);
+</script>

demo-shell-ng2/index.html

@@ -18,6 +18,7 @@
     <link rel="import" href="webcomponents/file-upload/file-upload.html">
     <link rel="import" href="webcomponents/alfresco-file-list/src/alfresco-file-list.html">
     <link rel="import" href="app/web-components/helloworld/helloworld.html">
+    <link rel="import" href="app/web-components/simple-list/simple-list.html">
 
     <!-- 1. Load libraries -->
     <!-- IE required polyfills, in this exact order -->