ionList basic components working

Author: Joey Arnold

.meteor/versions

@@ -52,7 +52,7 @@ iron:router@1.0.9
 iron:url@1.0.9
 jandres:ionic@0.1.24
 jandres:mutation-summary@0.0.1
-jandres:template-children@0.0.3
+jandres:template-children@0.0.4
 jquery@1.11.4
 launch-screen@1.0.4
 livedata@1.0.15

client/templates/index/index.html

@@ -103,8 +103,8 @@ <h1 class="title">Meteor Ionic</h1>
                     {{/ionItemContent}}
                 {{/ionItem}}
 
-                {{#ionItem path="slideBox"}}
-                    {{#ionItemContent class="item-icon-left item-icon-right"}}
+                {{#ionItem path="slideBox" class="item-icon-left item-icon-right"}}
+                    {{#ionItemContent}}
                         {{> ionIcon icon="ios-checkmark" class="positive"}}
                         Slide Box
                         {{> ionIcon icon="ios-arrow-right"}}

client/templates/lists/lists-sortable.html

@@ -5,19 +5,13 @@
     {{#contentFor "headerTitle"}}
         <h1 class="title">Lists</h1>
     {{/contentFor}}
+    {{#contentFor "headerButtonRight"}}
+        <button class="button button-clear" id="button-reorder">Reorder</button>
+    {{/contentFor}}
 
     {{#ionView}}
         {{#ionContent}}
-            <li class="item item-toggle">
-                Sortable
-                <label class="toggle">
-                    <input type="checkbox" id="sortable-checkbox">
-                    <div class="track">
-                        <div class="handle"></div>
-                    </div>
-                </label>
-            </li>
-            {{#ionList ionSortable=sortable onReorder=onReorder showDelete=deletable}}
+            {{#ionList onReorder=onReorder showDelete=deletable showReorder=sortable canSwipe=true}}
                 {{#each times}}
                     {{#ionItem class="item-button-right item-avatar-right" index=this}}
                         {{#ionItemContent}}
@@ -36,6 +30,7 @@ <h2>John Smith {{..}}</h2>
                         {{/ionItemOptions}}
 
                         {{#ionDeleteButton class="ion-minus-circled"}}{{/ionDeleteButton}}
+                        {{#ionReorderButton class="ion-navicon"}}{{/ionReorderButton}}
                     {{/ionItem}}
                 {{/each}}
             {{/ionList}}

client/templates/lists/lists-sortable.js

@@ -7,6 +7,7 @@ Template.listsSortable.onCreated(function(){
 
 Template.listsSortable.onRendered(function(){
     $("#button-delete").click(() => this.deletable.set(!this.deletable.get()));
+    $("#button-reorder").click(() => this.sortable.set(!this.sortable.get()));
 });
 
 Template.listsSortable.helpers({
@@ -31,11 +32,4 @@ Template.listsSortable.helpers({
     deletable: function () {
         return Template.instance().deletable.get();
     }
-});
-
-Template.listsSortable.events({
-    "change #sortable-checkbox": function(e, template) {
-        let sortable = e.target.checked;
-        template.sortable.set(sortable);
-    }
 });

client/templates/lists/lists.html

@@ -15,12 +15,12 @@ <h1 class="title">Lists</h1>
 
                 {{#each times}}
                     {{#ionItem buttonRight=true avatar=true index=this}}
-                        <img src="https://randomuser.me/api/portraits/thumb/men/27.jpg">
-                        <h2>John Smith {{{this}}}</h2>
-                        <p>
-                            (555) 555-1212
-                        </p>
-                        <button class="button button-positive">{{> ionIcon icon="ios-telephone"}}</button>
+                        {{#ionItemContent}}
+                            <img src="https://randomuser.me/api/portraits/thumb/men/27.jpg">
+                            <h2>John Smith {{{..}}}</h2>
+                            <p>(555) 555-1212</p>
+                            <button class="button button-positive">{{> ionIcon icon="ios-telephone"}}</button>
+                        {{/ionItemContent}}
                     {{/ionItem}}
                 {{/each}}