adamesque · November 3, 2015 22:22 · Nov 3, 2015 · Nov 3, 2015 · Nov 3, 2015 · Nov 3, 2015
diff --git a/application.template.hbs b/application.template.hbs
@@ -10,5 +10,6 @@
   <b {{action onSelect}}>{{item}} {{if selected 'is grate'}}</b>
   --}}
 {{/list-view}}
+
 <br>
 <br>
diff --git a/helpers.eq.js b/helpers.eq.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export function eq(params/*, hash*/) {
+  return params[0] === params[1];
+}
+
+export default Ember.Helper.helper(eq);
diff --git a/list-view.component.js b/list-view.component.js
@@ -2,16 +2,6 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   selectedItem: null,
-  listItems: Ember.computed('selectedItem', 'items.[]', function () {
-    let selectedItem = this.get('selectedItem');
-    let items = this.get('items');
-    return items.map(function (item) {
-      return {
-        item: item,
-        isSelected: item === selectedItem 
-      };
-    });
-  }),
   actions: {
     onSelect(item) {
       let onSelect = this.get('onSelect');

diff --git a/list-view.template.hbs b/list-view.template.hbs
@@ -1,3 +1,3 @@
-{{#each listItems as |item|}}
-  {{yield item.item item.isSelected (action 'onSelect' item.item)}}
+{{#each items as |item|}}
+  {{yield item (eq item selectedItem) (action 'onSelect' item)}}
 {{/each}}
diff --git a/application.controller.js b/application.controller.js
@@ -2,5 +2,10 @@ import Ember from 'ember';
 
 export default Ember.Controller.extend({
   appName:'Ember Twiddle',
-  items: "one two three".w()
+  items: "one two three".w(),
+  actions: {
+    handleSelect(item) {
+      alert(item);
+    }
+  }
 });
diff --git a/application.template.hbs b/application.template.hbs
@@ -1,7 +1,7 @@
 <h1>Welcome to {{appName}}</h1>
 <br>
 <br>
-{{#list-view items=items as |item selected onSelect|}}
+{{#list-view items=items onSelect=(action 'handleSelect') as |item selected onSelect|}}
   {{! use a component }}
   {{list-item value=item isSelected=selected onSelect=onSelect}}
 

diff --git a/list-view.component.js b/list-view.component.js
@@ -14,7 +14,9 @@ export default Ember.Component.extend({
   }),
   actions: {
     onSelect(item) {
+      let onSelect = this.get('onSelect');
       this.set('selectedItem', item);
+      typeof onSelect === 'function' && onSelect(item);
     }
   }
 });
diff --git a/styles.app.css b/styles.app.css
@@ -4,6 +4,10 @@ body {
   font-size: 12pt;
 }
 
+li {
+  cursor: default;
+}
+
 .is-selected {
   color: hotpink;
 }
diff --git a/list-view.component.js b/list-view.component.js
@@ -1,20 +1,20 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  selectedIndex: null,
-  listItems: Ember.computed('selectedIndex', 'items.[]', function () {
-    let selectedIndex = this.get('selectedIndex');
+  selectedItem: null,
+  listItems: Ember.computed('selectedItem', 'items.[]', function () {
+    let selectedItem = this.get('selectedItem');
     let items = this.get('items');
-    return items.map(function (item, i) {
+    return items.map(function (item) {
       return {
         item: item,
-        isSelected: i === selectedIndex 
+        isSelected: item === selectedItem 
       };
     });
   }),
   actions: {
-    onSelect(item, i) {
-      this.set('selectedIndex', i);
+    onSelect(item) {
+      this.set('selectedItem', item);
     }
   }
 });
diff --git a/list-view.template.hbs b/list-view.template.hbs
@@ -1,3 +1,3 @@
-{{#each listItems as |item index|}}
-  {{yield item.item item.isSelected (action 'onSelect' item.item index)}}
+{{#each listItems as |item|}}
+  {{yield item.item item.isSelected (action 'onSelect' item.item)}}
 {{/each}}
diff --git a/application.template.hbs b/application.template.hbs
@@ -6,7 +6,9 @@
   {{list-item value=item isSelected=selected onSelect=onSelect}}
 
   {{! or your own markup }}
+  {{!--
   <b {{action onSelect}}>{{item}} {{if selected 'is grate'}}</b>
+  --}}
 {{/list-view}}
 <br>
 <br>
diff --git a/list-item.component.js b/list-item.component.js
@@ -8,10 +8,5 @@ export default Ember.Component.extend({
     if (typeof onSelect === 'function') {
       onSelect();
     }
-  },
-  actions: {
-    select() {
-      this.get('onSelect')();
-    }
   }
 });
diff --git a/application.template.hbs b/application.template.hbs
@@ -2,7 +2,11 @@
 <br>
 <br>
 {{#list-view items=items as |item selected onSelect|}}
+  {{! use a component }}
   {{list-item value=item isSelected=selected onSelect=onSelect}}
+
+  {{! or your own markup }}
+  <b {{action onSelect}}>{{item}} {{if selected 'is grate'}}</b>
 {{/list-view}}
 <br>
 <br>
diff --git a/list-view.component.js b/list-view.component.js
@@ -13,8 +13,8 @@ export default Ember.Component.extend({
     });
   }),
   actions: {
-    onSelect(item) {
-      alert(item);
+    onSelect(item, i) {
+      this.set('selectedIndex', i);
     }
   }
 });
diff --git a/list-view.template.hbs b/list-view.template.hbs
@@ -1,3 +1,3 @@
-{{#each listItems as |item|}}
-  {{yield item.item item.isSelected (action 'onSelect' item.item)}}
+{{#each listItems as |item index|}}
+  {{yield item.item item.isSelected (action 'onSelect' item.item index)}}
 {{/each}}
diff --git a/application.controller.js b/application.controller.js
@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  appName:'Ember Twiddle',
+  items: "one two three".w()
+});
diff --git a/application.template.hbs b/application.template.hbs
@@ -0,0 +1,8 @@
+<h1>Welcome to {{appName}}</h1>
+<br>
+<br>
+{{#list-view items=items as |item selected onSelect|}}
+  {{list-item value=item isSelected=selected onSelect=onSelect}}
+{{/list-view}}
+<br>
+<br>
diff --git a/list-item.component.js b/list-item.component.js
@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'li',
+  classNameBindings: ['isSelected'],
+  click() {
+    let onSelect = this.get('onSelect');
+    if (typeof onSelect === 'function') {
+      onSelect();
+    }
+  },
+  actions: {
+    select() {
+      this.get('onSelect')();
+    }
+  }
+});
diff --git a/list-item.template.hbs b/list-item.template.hbs
@@ -0,0 +1 @@
+{{value}}
diff --git a/list-view.component.js b/list-view.component.js
@@ -0,0 +1,20 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  selectedIndex: null,
+  listItems: Ember.computed('selectedIndex', 'items.[]', function () {
+    let selectedIndex = this.get('selectedIndex');
+    let items = this.get('items');
+    return items.map(function (item, i) {
+      return {
+        item: item,
+        isSelected: i === selectedIndex 
+      };
+    });
+  }),
+  actions: {
+    onSelect(item) {
+      alert(item);
+    }
+  }
+});
diff --git a/list-view.template.hbs b/list-view.template.hbs
@@ -0,0 +1,3 @@
+{{#each listItems as |item|}}
+  {{yield item.item item.isSelected (action 'onSelect' item.item)}}
+{{/each}}
diff --git a/styles.app.css b/styles.app.css
@@ -0,0 +1,9 @@
+body {
+  margin: 12px 16px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12pt;
+}
+
+.is-selected {
+  color: hotpink;
+}
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,12 @@
+{
+  "version": "0.4.16",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
+    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
+    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
+  }
+}