chore(sample): support toggling between div and table markup

aurelia · Jul 8, 2016 · cb23200 · cb23200
1 parent 0281d31
commit cb23200
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/sample/src/phone-list.html b/sample/src/phone-list.html
@@ -9,9 +9,13 @@
    <button class="btn btn-primary" click.delegate="removeLast()">Remove 1 at bottom</button>
    <button class="btn btn-primary" click.delegate="toggle()">Toggle visibility</button>
    <button class="btn btn-primary" click.delegate="swap()">Swap</button>
+   <select value.bind="selectedMarkup" class="form-control">
+     <option value="div">div</option>
+     <option value="table">table</option>
+   </select>
  </div>
 
- <div if.bind="isVisible">
+ <div if.bind="isVisible && selectedMarkup === 'div'">
    <div virtual-repeat.for="item of objectArray" class="contact-list-item ${item.name}">
      <div class="contact-item">
        <div class="avatar" click.delegate="click()" css="background-color: ${item.color}">${item.firstLetter}</div>
@@ -25,4 +29,23 @@
        </div>
      </div>
   </div>
+
+  <div if.bind="isVisible && selectedMarkup === 'table'">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Name</th>
+          <th>Phone</th>
+          <th>Country</th>
+        </tr>
+      </thead>
+      <tr virtual-repeat.for="item of objectArray" class="contact-list-item ${item.name}">
+        <td class="avatar" click.delegate="click()" css="background-color: ${item.color}">${item.firstLetter}</td>
+        <td class="name">${$index} ${item.name}</td>
+        <td><strong>Phone:</strong> ${item.phone} </td>
+        <td>Country:</strong> ${item.country} </td>
+      </tr>
+    </table>
+  </div>
 </template>
diff --git a/sample/src/phone-list.js b/sample/src/phone-list.js
@@ -1,12 +1,12 @@
 export class PhoneList {
+  selectedMarkup = 'div';
 
   constructor() {
     this.objectArray = [];
     this.objectArray2 = [];
     this.numberOfItems = 100;
     this.isSelected = false;
     this.isVisible = true;
-    this.viewStrategy = 'div';
   }
 
   setViewStrategy(strategy){
@@ -67,8 +67,10 @@ export class PhoneList {
     this.objectArray.splice(1, 0, item);
   }
 
-  addItemFirst(){
-    this.objectArray.unshift(this.createItem());
+  addItemFirst(count = 10){
+    for(let i = 0; i < count; ++i) {
+      this.objectArray.unshift(this.createItem());
+    }
   }
 
   removeItems(count){

diff --git a/sample/styles.css b/sample/styles.css
@@ -122,3 +122,16 @@ section {
   text-align: center;
   line-height: 65px;
 }
+
+.array-actions select {
+  width: 100px;
+}
+
+table.table {
+  margin-top: 200px;
+  border-top: 0px solid red;
+}
+
+table.table td, table.table th {
+  color: #fff;
+}