sglanzer-deprecated · May 3, 2017 15:29 · May 3, 2017
diff --git a/components.some-filter.js b/components.some-filter.js
@@ -0,0 +1,16 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  class: 'some-filter',
+  classNameBindings: ['selected'],
+
+  selected: Ember.computed('selectedFilter', function () {
+    const label = this.get('label')
+    const selectedFilter = this.get('selectedFilter')
+    return label === selectedFilter
+  }),
+
+  click () {
+    this.onSelect(this.get('label'))
+  }
+});
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,20 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  appName: 'Ember Twiddle',
+  controllerSelectedFilter: 'B',
+
+  content: Ember.computed('controllerSelectedFilter', function () {
+    switch (this.get('controllerSelectedFilter')) {
+      case 'A': return 'is for Apple'
+      case 'B': return 'is for Banana'
+      case 'C': return 'is for Carrot'
+    }
+  }),
+
+  actions: {
+    select (label) {
+      this.set('controllerSelectedFilter', label)
+    }
+  }
+});
diff --git a/routes.my-other-route.js b/routes.my-other-route.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});
diff --git a/routes.my-route.js b/routes.my-route.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});
diff --git a/routes.my-super-route.js b/routes.my-super-route.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});
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;
+}
+
+.selected {
+  border-bottom: 2px solid green;
+}
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,15 @@
+<h1>Welcome to {{appName}}</h1>
+<br>
+<br>
+<div>
+<span>
+{{some-filter label='A' selectedFilter=controllerSelectedFilter onSelect=(action 'select')}}
+{{some-filter label='B' selectedFilter=controllerSelectedFilter onSelect=(action 'select')}}
+{{some-filter label='C' selectedFilter=controllerSelectedFilter onSelect=(action 'select')}}
+</span>
+<span>
+	{{content}}
+</span>
+</div>
+<br>
+<br>
diff --git a/templates.components.some-filter.hbs b/templates.components.some-filter.hbs
@@ -0,0 +1 @@
+{{label}}
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,19 @@
+{
+  "version": "0.12.1",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+    "ember": "2.12.0",
+    "ember-template-compiler": "2.12.0",
+    "ember-testing": "2.12.0"
+  },
+  "addons": {
+    "ember-data": "2.12.1"
+  }
+}