acorncom · February 23, 2017 18:27
diff --git a/components.desired.card-holder.js b/components.desired.card-holder.js
 import Ember from 'ember';

 export default Ember.Component.extend({
 });
diff --git a/components.desired.nested-card.js b/components.desired.nested-card.js
 import Ember from 'ember';

 export default Ember.Component.extend({
 });
diff --git a/components.desired.side-bar.js b/components.desired.side-bar.js
 import Ember from 'ember';
 /*
 export default Ember.Component.extend({
 	items: [
    Ember.Object.create({ open: true, children: [
 	    Ember.Object.create({ open: true, children: [
  	  	Ember.Object.create({ open: true }),
    	]}),
      Ember.Object.create({ open: true }),
    ]}),
    Ember.Object.create({ open: true }),
  ]
 });


 import Ember from 'ember';
 */

 export default Ember.Component.extend({
 	items: [
    Ember.Object.create({
      name: 'Dave',
      children: Ember.Object.create({
        open: true, 
      	items: [
 	    		Ember.Object.create({
            name: 'Joe',
            children: Ember.Object.create({
              open: true,
 							items: [
                Ember.Object.create({ name: 'Bill' }),
      				]
    				}),
          }),
      		Ember.Object.create({ name: 'George' }),
        ]
    	}),
    }),
    Ember.Object.create({ name: 'Harry' }),
  ],
  
  actions: {
    clicked(item) {
      item.toggleProperty('open');
    }    
  }
 });
diff --git a/components.working.card-holder.js b/components.working.card-holder.js
 import Ember from 'ember';

 export default Ember.Component.extend({
 });
diff --git a/components.working.nested-card.js b/components.working.nested-card.js
 import Ember from 'ember';

 export default Ember.Component.extend({
 });
diff --git a/components.working.side-bar.js b/components.working.side-bar.js
 import Ember from 'ember';

 export default Ember.Component.extend({
 	cardHolder1: true,
 	cardHolder2: true,
 	cardHolder3: true,
 	cardHolder4: true,
  cardHolder5: true,
  
  actions: {
   	clicked(item) {
      this.toggleProperty(item);
    }
  }
 });
diff --git a/controllers.application.js b/controllers.application.js
 import Ember from 'ember';

 export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
 });
diff --git a/router.js b/router.js
 import Ember from 'ember';
 import config from './config/environment';

 const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
 });

 Router.map(function() {
  this.route('desired', { path: '/' });
  this.route('working');
 });

 export default Router;
diff --git a/templates.application.hbs b/templates.application.hbs
 <ul>
 <li>{{#link-to 'desired'}}Desired{{/link-to}}</li>
 <li>{{#link-to 'working'}}Working{{/link-to}}</li>
 </ul>
 {{outlet}}
diff --git a/templates.components.desired.card-holder.hbs b/templates.components.desired.card-holder.hbs
 <div style="border: 1px solid red; padding: 1rem">
 	{{desired/nested-card model=item}}
 {{!yield item}}

 {{#if item.children}}
 <br>
 Children:
 {{#if item.children.open}}
 	<button {{action clicked item.children}}>Shut</button>
  
    {{#each item.children.items as |child|}}
 	  {{#desired/card-holder item=child clicked=(action clicked) as |childItem|}}
 	    {{desired/nested-card model=childItem}}
 {{!--
    	{{log 'yielding to a nested card'}}
      {{log childItem.name}}
    	{{yield childItem}}
 --}}
    {{/desired/card-holder}}
  {{/each}}

 {{else}}
 	<button {{action clicked item.children}}>Open</button>
 {{/if}}

 {{/if}}
 </div>
diff --git a/templates.components.desired.nested-card.hbs b/templates.components.desired.nested-card.hbs
 <div style="border: 1px solid green; padding: 1rem;">
 {{log 'held name'}}
 {{log model.name}}
 {{model.name}}
 </div>
diff --git a/templates.components.desired.side-bar.hbs b/templates.components.desired.side-bar.hbs
 {{#each items as |item|}}
 	{{desired/card-holder item=item clicked=(action 'clicked')}}
 {{!--  
  {{#desired/card-holder item=item clicked=(action 'clicked') as |heldItem|}}
  	{{log 'inside sidebar nested'}}
    {{log 'heldItem is'}}
    {{log heldItem.name}}
  	{{desired/nested-card model=heldItem}}
  {{/desired/card-holder}}
  --}}
 {{/each}}
diff --git a/templates.components.working.card-holder.hbs b/templates.components.working.card-holder.hbs
 <div style="border: 1px solid red; padding: 1rem;">
 {{#if open}}
 	open
  {{working/nested-card clicked=(action clicked)}}
 	{{yield}}
 {{else}}
 shut <button {{action clicked}}>open</button>
 {{/if}}
 </div>
diff --git a/templates.components.working.nested-card.hbs b/templates.components.working.nested-card.hbs
 <div style="border: 1px solid green; padding: 1rem;">
 <button {{action clicked}}>Shut</button> working nested card
 </div>
diff --git a/templates.components.working.side-bar.hbs b/templates.components.working.side-bar.hbs
 {{#working/card-holder open=cardHolder1 clicked=(action 'clicked' 'cardHolder1')}}
 {{/working/card-holder}}

 {{#working/card-holder open=cardHolder2 clicked=(action 'clicked' 'cardHolder2')}}
 	{{#working/card-holder open=cardHolder3 clicked=(action 'clicked' 'cardHolder3')}}
  	{{working/card-holder open=cardHolder4 clicked=(action 'clicked' 'cardHolder4')}}
 	{{/working/card-holder}}
  
  {{working/card-holder open=cardHolder5 clicked=(action 'clicked' 'cardHolder5')}}
 {{/working/card-holder}}
diff --git a/templates.desired.hbs b/templates.desired.hbs
 <h2>Desired</h2>

 {{desired/side-bar}}
diff --git a/templates.working.hbs b/templates.working.hbs
 <h2>Working</h2>

 {{working/side-bar}}
diff --git a/twiddle.json b/twiddle.json
 {
  "version": "0.11.0",
  "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.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
 }
	import Ember from 'ember';

	export default Ember.Component.extend({
	});
	import Ember from 'ember';
	/*
	export default Ember.Component.extend({
	items: [
	Ember.Object.create({ open: true, children: [
	Ember.Object.create({ open: true, children: [
	Ember.Object.create({ open: true }),
	]}),
	Ember.Object.create({ open: true }),
	]}),
	Ember.Object.create({ open: true }),
	]
	});


	import Ember from 'ember';
	*/

	export default Ember.Component.extend({
	items: [
	Ember.Object.create({
	name: 'Dave',
	children: Ember.Object.create({
	open: true,
	items: [
	Ember.Object.create({
	name: 'Joe',
	children: Ember.Object.create({
	open: true,
	items: [
	Ember.Object.create({ name: 'Bill' }),
	]
	}),
	}),
	Ember.Object.create({ name: 'George' }),
	]
	}),
	}),
	Ember.Object.create({ name: 'Harry' }),
	],

	actions: {
	clicked(item) {
	item.toggleProperty('open');
	}
	}
	});
	import Ember from 'ember';

	export default Ember.Component.extend({
	cardHolder1: true,
	cardHolder2: true,
	cardHolder3: true,
	cardHolder4: true,
	cardHolder5: true,

	actions: {
	clicked(item) {
	this.toggleProperty(item);
	}
	}
	});
	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle'
	});
	import Ember from 'ember';
	import config from './config/environment';

	const Router = Ember.Router.extend({
	location: 'none',
	rootURL: config.rootURL
	});

	Router.map(function() {
	this.route('desired', { path: '/' });
	this.route('working');
	});

	export default Router;
	<ul>
	<li>{{#link-to 'desired'}}Desired{{/link-to}}</li>
	<li>{{#link-to 'working'}}Working{{/link-to}}</li>
	</ul>
	{{outlet}}
	<div style="border: 1px solid red; padding: 1rem">
	{{desired/nested-card model=item}}
	{{!yield item}}

	{{#if item.children}}
	<br>
	Children:
	{{#if item.children.open}}
	<button {{action clicked item.children}}>Shut</button>

	{{#each item.children.items as \|child\|}}
	{{#desired/card-holder item=child clicked=(action clicked) as \|childItem\|}}
	{{desired/nested-card model=childItem}}
	{{!--
	{{log 'yielding to a nested card'}}
	{{log childItem.name}}
	{{yield childItem}}
	--}}
	{{/desired/card-holder}}
	{{/each}}

	{{else}}
	<button {{action clicked item.children}}>Open</button>
	{{/if}}

	{{/if}}
	</div>
	<div style="border: 1px solid green; padding: 1rem;">
	{{log 'held name'}}
	{{log model.name}}
	{{model.name}}
	</div>
	{{#each items as \|item\|}}
	{{desired/card-holder item=item clicked=(action 'clicked')}}
	{{!--
	{{#desired/card-holder item=item clicked=(action 'clicked') as \|heldItem\|}}
	{{log 'inside sidebar nested'}}
	{{log 'heldItem is'}}
	{{log heldItem.name}}
	{{desired/nested-card model=heldItem}}
	{{/desired/card-holder}}
	--}}
	{{/each}}
	<div style="border: 1px solid red; padding: 1rem;">
	{{#if open}}
	open
	{{working/nested-card clicked=(action clicked)}}
	{{yield}}
	{{else}}
	shut <button {{action clicked}}>open</button>
	{{/if}}
	</div>