camskene · June 12, 2018 19:52
diff --git a/components.my-accordian.js b/components.my-accordian.js
 import Ember from 'ember';

 export default Ember.Component.extend({
  configuration: undefined,
  actions: {
    onExpand(item) {
      item.toggleProperty('isExpanded');
    },
  },
 });
diff --git a/components.my-accordion.component.js b/components.my-accordion.component.js
 import Ember from 'ember';

 export default Ember.Component.extend({
  configuration: undefined,
  actions: {
    onExpand(item) {
      Ember.set(item, 'isExpanded', !item.isExpanded);
    },
  },
 });
diff --git a/components.my-accordion.template.hbs b/components.my-accordion.template.hbs
 <ul>
  {{#each configuration as |item|}}
    <li>
      <h1>
        {{item.label}}
        <button {{action 'onExpand' item}}>
          {{#if item.isExpanded}}
            -
          {{else}}
            +
          {{/if}}
        </button>
      </h1>

      {{#if item.isExpanded}}
        <p>My content for {{item.label}}</p>
        {{#if item.children}}
          {{my-accordion
            configuration=item.children
          }}
        {{/if}}
      {{/if}}
    </li>
  {{/each}}
 </ul>
diff --git a/components.my-component-body.js b/components.my-component-body.js
 import Ember from 'ember';

 export default Ember.Component.extend({  
 });
diff --git a/components.my-component-trigger.js b/components.my-component-trigger.js
 import Ember from 'ember';

 export default Ember.Component.extend({
 	tagName: 'button',
 });
diff --git a/components.my-component.js b/components.my-component.js
 import Ember from 'ember';

 export default Ember.Component.extend({
  state: undefined,
  isExpanded: Ember.computed.readOnly('state.isExpanded'),
  
  classNames: ['my-component'],

  actions: {
  	toggle() {
      this.toggleProperty('isExpanded');
      
      if (!this.get('isExpanded')) {
 				return;
      }
      
 			this._setupClickHandler();
    },
  },
  
  willDestroyElement() {
    this._super(...arguments);
    this._teardownClickHandler();
  },
  
  _setupClickHandler() {
    $(document).on(`click.${this.elementId}`, (e) => {
      if (!e.target.closest(`#${this.elementId}`)) {
        this.set('isExpanded', false);
        this._teardownClickHandler();
      }
    });
  },
  
  _teardownClickHandler() {
    $(document).off(`click.${this.elementId}`);
  },
 });
diff --git a/controllers.application.js b/controllers.application.js
 import Ember from 'ember';

 export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  myAccordianConfig: Ember.computed(function() {
    return [
      {
        label: 'numero uno',
        isExpanded: false,
        children: [
          {
            label: '1.1',
            isExpanded: true,
          }
        ]
      },
      {
        label: '222',
        isExpanded: false,
      },
    ];
  }),

  
  actions: {
    onClickButton() {
      this.get('myAccordianConfig').setEach('isExpanded', true);
    }
  }
 });
diff --git a/styles.app.css b/styles.app.css
 body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
 }

 .my-component button {
  height: 30px;
  width: 100%;
 }
diff --git a/templates.application.hbs b/templates.application.hbs

 <button {{action 'onClickButton'}}>Bob</button>

 {{my-accordion
  configuration=myAccordianConfig
 }}
diff --git a/templates.components.my-accordian.hbs b/templates.components.my-accordian.hbs
 <ul>
 {{#each configuration as |item|}}
  <li>
    <h1>
    	{{item.label}}
      <a {{action 'onExpand' item}}>
        {{#if item.isExpanded}}
          -
        {{else}}
          +
        {{/if}}
      </a>
    </h1>

    {{#if item.isExpanded}}
      <p>My content for {{item.label}}</p>
      {{#if item.children}}
        {{my-accordian
          configuration=item.children
        }}
      {{/if}}
    {{/if}}
  </li>
 {{/each}}
 </ul>
diff --git a/templates.components.my-component-body.hbs b/templates.components.my-component-body.hbs
 {{#if isExpanded}}
 	{{yield}}
 {{/if}}
diff --git a/templates.components.my-component-trigger.hbs b/templates.components.my-component-trigger.hbs
 {{if isExpanded 'Collapse' 'Expand'}}
diff --git a/templates.components.my-component.hbs b/templates.components.my-component.hbs
 {{yield (hash
 	trigger=(component 'my-component-trigger' isExpanded=isExpanded click=(action 'toggle'))
  body=(component 'my-component-body' isExpanded=isExpanded)
 )}}
diff --git a/twiddle.json b/twiddle.json
 {
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "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"
  }
 }
	import Ember from 'ember';

	export default Ember.Component.extend({
	configuration: undefined,
	actions: {
	onExpand(item) {
	item.toggleProperty('isExpanded');
	},
	},
	});
	<ul>
	{{#each configuration as \|item\|}}
	<li>
	<h1>
	{{item.label}}
	<button {{action 'onExpand' item}}>
	{{#if item.isExpanded}}
	-
	{{else}}
	+
	{{/if}}
	</button>
	</h1>

	{{#if item.isExpanded}}
	<p>My content for {{item.label}}</p>
	{{#if item.children}}
	{{my-accordion
	configuration=item.children
	}}
	{{/if}}
	{{/if}}
	</li>
	{{/each}}
	</ul>
	import Ember from 'ember';

	export default Ember.Component.extend({
	tagName: 'button',
	});
	import Ember from 'ember';

	export default Ember.Component.extend({
	state: undefined,
	isExpanded: Ember.computed.readOnly('state.isExpanded'),

	classNames: ['my-component'],

	actions: {
	toggle() {
	this.toggleProperty('isExpanded');

	if (!this.get('isExpanded')) {
	return;
	}

	this._setupClickHandler();
	},
	},

	willDestroyElement() {
	this._super(...arguments);
	this._teardownClickHandler();
	},

	_setupClickHandler() {
	$(document).on(`click.${this.elementId}`, (e) => {
	if (!e.target.closest(`#${this.elementId}`)) {
	this.set('isExpanded', false);
	this._teardownClickHandler();
	}
	});
	},

	_teardownClickHandler() {
	$(document).off(`click.${this.elementId}`);
	},
	});
	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle',

	myAccordianConfig: Ember.computed(function() {
	return [
	{
	label: 'numero uno',
	isExpanded: false,
	children: [
	{
	label: '1.1',
	isExpanded: true,
	}
	]
	},
	{
	label: '222',
	isExpanded: false,
	},
	];
	}),


	actions: {
	onClickButton() {
	this.get('myAccordianConfig').setEach('isExpanded', true);
	}
	}
	});
	body {
	margin: 12px 16px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 12pt;
	}

	.my-component button {
	height: 30px;
	width: 100%;
	}

	<button {{action 'onClickButton'}}>Bob</button>

	{{my-accordion
	configuration=myAccordianConfig
	}}
	{{yield (hash
	trigger=(component 'my-component-trigger' isExpanded=isExpanded click=(action 'toggle'))
	body=(component 'my-component-body' isExpanded=isExpanded)
	)}}
	{
	"version": "0.12.1",
	"EmberENV": {
	"FEATURES": {}
	},
	"options": {
	"use_pods": true,
	"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"
	}
	}