rwjblue · April 23, 2019 16:47 · Apr 23, 2019 · Apr 16, 2019 · Apr 16, 2019 · Apr 16, 2019
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;
+}
+
+export default Ember.Helper.helper(eq);
diff --git a/templates.components.select-component.hbs b/templates.components.select-component.hbs
@@ -1,7 +1,7 @@
 
-<select value={{value}} onchange={{action onChange}}>
+<select onchange={{action onChange}}>
   {{#each options as |opt|}}
-    <option value={{opt.key}}>{{opt.label}}</option>
+    <option value={{opt.key}} selected={{eq opt.key value}}>{{opt.label}}</option>
   {{/each}}
 </select>
 

diff --git a/templates.components.select-component.hbs b/templates.components.select-component.hbs
@@ -1,6 +1,8 @@
-Value: {{value}}
+
 <select value={{value}} onchange={{action onChange}}>
   {{#each options as |opt|}}
     <option value={{opt.key}}>{{opt.label}}</option>
   {{/each}}
 </select>
+
+Value: {{value}}
diff --git a/templates.components.checkbox-component.hbs b/templates.components.checkbox-component.hbs
@@ -1,9 +1,9 @@
-{{checked}}
+
 <input type="checkbox"
 	name="state"
   id={{label}}
   checked={{checked}}
   onchange={{action changeState}}
   />
-<label for="active">Label for {{checked}}</label>
+<label for="active">{{checked}}</label>
 
diff --git a/templates.components.checkbox-component.hbs b/templates.components.checkbox-component.hbs
@@ -5,5 +5,5 @@
   checked={{checked}}
   onchange={{action changeState}}
   />
-<label for="active">Active</label>
+<label for="active">Label for {{checked}}</label>
 
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -1,10 +1,10 @@
 <h1>Welcome to {{appName}}</h1>
 <br>
-<br>
+<h3>Checkbox value should be in sync</h3>
 {{#each data key="checked" as |state|}}
 	{{checkbox-component label=state.label checked=state.checked changeState=(action "changeState")}}
 {{/each}}
 
-<h2>Select doesn't keep value</h2>
+<h3>Select value should be in sync</h3>
 
 {{select-component value=selected options=options onChange=(action "changeSelectValue")}}
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -5,5 +5,6 @@
 	{{checkbox-component label=state.label checked=state.checked changeState=(action "changeState")}}
 {{/each}}
 
-{{selected}}
+<h2>Select doesn't keep value</h2>
+
 {{select-component value=selected options=options onChange=(action "changeSelectValue")}}
diff --git a/templates.components.select-component.hbs b/templates.components.select-component.hbs
@@ -1,6 +1,6 @@
 Value: {{value}}
 <select value={{value}} onchange={{action onChange}}>
   {{#each options as |opt|}}
-    <option key={{opt.key}}>{{opt.label}}</option>
+    <option value={{opt.key}}>{{opt.label}}</option>
   {{/each}}
 </select>
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -5,5 +5,5 @@
 	{{checkbox-component label=state.label checked=state.checked changeState=(action "changeState")}}
 {{/each}}
 
-
+{{selected}}
 {{select-component value=selected options=options onChange=(action "changeSelectValue")}}
diff --git a/templates.components.select-component.hbs b/templates.components.select-component.hbs
@@ -1,4 +1,4 @@
-{{value}}
+Value: {{value}}
 <select value={{value}} onchange={{action onChange}}>
   {{#each options as |opt|}}
     <option key={{opt.key}}>{{opt.label}}</option>

diff --git a/templates.components.select-component.hbs b/templates.components.select-component.hbs
@@ -1,3 +1,4 @@
+{{value}}
 <select value={{value}} onchange={{action onChange}}>
   {{#each options as |opt|}}
     <option key={{opt.key}}>{{opt.label}}</option>

diff --git a/controllers.application.js b/controllers.application.js
@@ -41,7 +41,7 @@ export default Ember.Controller.extend({
 			this.set('data', newData);
     },
 
-    changeCheckbox() {
+    changeSelectValue() {
 
 			this.set('selected', 'option3');
     }

diff --git a/templates.application.hbs b/templates.application.hbs
@@ -6,4 +6,4 @@
 {{/each}}
 
 
-{{select-component value=selected options=options}}
+{{select-component value=selected options=options onChange=(action "changeSelectValue")}}
diff --git a/templates.components.select-component.hbs b/templates.components.select-component.hbs
@@ -1,5 +1,5 @@
-<select value={{value}}>
+<select value={{value}} onchange={{action onChange}}>
   {{#each options as |opt|}}
     <option key={{opt.key}}>{{opt.label}}</option>
   {{/each}}
-</select>
+</select>
diff --git a/controllers.application.js b/controllers.application.js
@@ -39,6 +39,11 @@ export default Ember.Controller.extend({
       });
 
 			this.set('data', newData);
+    },
+
+    changeCheckbox() {
+
+			this.set('selected', 'option3');
     }
   }
 });
diff --git a/controllers.application.js b/controllers.application.js
@@ -23,6 +23,10 @@ export default Ember.Controller.extend({
       label: 'Option 2',
       key: 'option2',
     },
+    {
+      label: 'Option 3',
+      key: 'option3',
+    },
   ],
 
   actions: {

diff --git a/templates.components.select-component.hbs b/templates.components.select-component.hbs
@@ -1,4 +1,4 @@
-<select>
+<select value={{value}}>
   {{#each options as |opt|}}
     <option key={{opt.key}}>{{opt.label}}</option>
   {{/each}}

diff --git a/controllers.application.js b/controllers.application.js
@@ -25,8 +25,6 @@ export default Ember.Controller.extend({
     },
   ],
 
-  selected: 'option1',
-
   actions: {
   	changeState() {
       const newData = this.get('data').map((d) => {

diff --git a/templates.components.select-component.hbs b/templates.components.select-component.hbs
@@ -1,5 +1,5 @@
 <select>
-  {{#each options as |option|}}
-    <option key={{option.key}}>{{option.label}}</option>
+  {{#each options as |opt|}}
+    <option key={{opt.key}}>{{opt.label}}</option>
   {{/each}}
 </select>
diff --git a/controllers.application.js b/controllers.application.js
@@ -25,6 +25,8 @@ export default Ember.Controller.extend({
     },
   ],
 
+  selected: 'option1',
+
   actions: {
   	changeState() {
       const newData = this.get('data').map((d) => {

diff --git a/templates.application.hbs b/templates.application.hbs
@@ -6,3 +6,4 @@
 {{/each}}
 
 
+{{select-component value=selected options=options}}
diff --git a/templates.components.select-component.hbs b/templates.components.select-component.hbs
@@ -1,4 +1,4 @@
-<select value={{value}}>
+<select>
   {{#each options as |option|}}
     <option key={{option.key}}>{{option.label}}</option>
   {{/each}}

diff --git a/templates.application.hbs b/templates.application.hbs
@@ -5,4 +5,4 @@
 	{{checkbox-component label=state.label checked=state.checked changeState=(action "changeState")}}
 {{/each}}
 
-{{select-component value=selected options=options}}
+
diff --git a/controllers.application.js b/controllers.application.js
@@ -14,6 +14,17 @@ export default Ember.Controller.extend({
     }
   ],
 
+  options: [
+    {
+      label: 'Option 1',
+      key: 'option1',
+    },
+    {
+      label: 'Option 2',
+      key: 'option2',
+    },
+  ],
+
   actions: {
   	changeState() {
       const newData = this.get('data').map((d) => {

diff --git a/templates.application.hbs b/templates.application.hbs
@@ -5,5 +5,4 @@
 	{{checkbox-component label=state.label checked=state.checked changeState=(action "changeState")}}
 {{/each}}
 
-
-{{select-component value=selected options=options}}
+{{select-component value=selected options=options}}
diff --git a/templates.components.select-component.hbs b/templates.components.select-component.hbs
@@ -1 +1,5 @@
-{{yield}}
+<select value={{value}}>
+  {{#each options as |option|}}
+    <option key={{option.key}}>{{option.label}}</option>
+  {{/each}}
+</select>
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -4,3 +4,6 @@
 {{#each data key="checked" as |state|}}
 	{{checkbox-component label=state.label checked=state.checked changeState=(action "changeState")}}
 {{/each}}
+
+
+{{select-component value=selected options=options}}
diff --git a/components.select-component.js b/components.select-component.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});
diff --git a/templates.components.select-component.hbs b/templates.components.select-component.hbs
@@ -0,0 +1 @@
+{{yield}}
diff --git a/components.checkbox-component.js b/components.checkbox-component.js
@@ -0,0 +1,3 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({});
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,29 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  appName: 'Ember Twiddle',
+
+  data: [
+    {
+      checked: true,
+      label: 'active'
+    },
+    {
+      checked: false,
+      label: 'archived'
+    }
+  ],
+
+  actions: {
+  	changeState() {
+      const newData = this.get('data').map((d) => {
+        return {
+        	...d,
+          checked: true
+        }
+      });
+
+			this.set('data', newData);
+    }
+  }
+});
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,6 @@
+<h1>Welcome to {{appName}}</h1>
+<br>
+<br>
+{{#each data key="checked" as |state|}}
+	{{checkbox-component label=state.label checked=state.checked changeState=(action "changeState")}}
+{{/each}}
diff --git a/templates.components.checkbox-component.hbs b/templates.components.checkbox-component.hbs
@@ -0,0 +1,9 @@
+{{checked}}
+<input type="checkbox"
+	name="state"
+  id={{label}}
+  checked={{checked}}
+  onchange={{action changeState}}
+  />
+<label for="active">Active</label>
+
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,19 @@
+{
+  "version": "0.15.1",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
+    "ember": "3.4.3",
+    "ember-template-compiler": "3.4.3",
+    "ember-testing": "3.4.3"
+  },
+  "addons": {
+    "ember-data": "3.4.2"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -6,3 +6,4 @@
		{{/each}}


		{{select-component value=selected options=options}}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Ember from 'ember';

		export default Ember.Component.extend({});