jkeen · January 27, 2017 14:18
diff --git a/components.content-for.js b/components.content-for.js
 import Ember from 'ember';
 import computed from 'ember-computed';
 import layout from '../templates/components/content-for';

 let ContentFor = Ember.Component.extend({
  layout,
  tagName: '',

  hasContentForYield: computed('contentName', 'yieldName', function() {
    return (this.get('contentName') === this.get('yieldName'));
  }),

  yieldContent: computed('hasContentForYield', 'yieldArguments', function() {
    if (this.get('hasContentForYield')) {
      return this.get('yieldArguments');
    }
  })
 });

 ContentFor.reopenClass({
  positionalParams: ['contentName']
 });

 export default ContentFor;
diff --git a/components.modal-dialog.js b/components.modal-dialog.js
 import Ember from 'ember';

 export default Ember.Component.extend({
  classNames:['modal-dialog']
 });
diff --git a/components.modal-dialog.modal-close-button.js b/components.modal-dialog.modal-close-button.js
 import Ember from 'ember';

 export default Ember.Component.extend({
 });
diff --git a/controllers.application.js b/controllers.application.js
 import Ember from 'ember';

 export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  actions: {
    close() {
    	alert('close triggered');
    }
  }
 });
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;
 }

 .modal-dialog {
  display:block;
  border:1px solid #CCC;
 	width: auto;
  margin: 20px;
  background-color:#F6F6F6;
 }

 .modal-body {
  padding: 15px 20px;
  min-height:150px;
 }

 .modal-header {
 	padding: 5px 20px;
  border-bottom:1px solid #CCC;
 }

 .modal-header h3 {
 	padding: 10px 0; 
  margin:0;
 }

 .modal-footer {
  border-top:1px solid #CCC;
 	padding: 10px 20px;
  min-height:20px;
 }
diff --git a/templates.application.hbs b/templates.application.hbs
 {{#modal-dialog as |content|}}
 	{{#content.for "title"}}
  	A simple(ish) pattern for multiple content areas in a component
  {{/content.for}}
 	{{#content.for "body"}}
      <p>
      Most of the complexity is hidden from the consumer, although there are some oddities with some of the outputted source, and when you put things outside of one of these `content.for` blocks.
      </p>
      <p>
        It would be great if the complexity in modal-dialog.hbs could be hidden away in a template helper so then this could be made into an addon (maybe), but initializing a component from a template helper doesn't seem to be straight forward.
      </p>
  {{/content.for}}
  {{#content.for "footer" as |args|}}
  	{{args.closeButton buttonText="Close" click=(action 'close')}}
  {{/content.for}}
 {{/modal-dialog}}
diff --git a/templates.components.content-for.hbs b/templates.components.content-for.hbs
 {{#if hasContentForYield}}
  {{yield yieldContent}}
 {{/if}}
diff --git a/templates.components.modal-dialog.hbs b/templates.components.modal-dialog.hbs
 <header class="modal-header">
 	<h3>
 		{{yield (hash for=(component 'content-for' yieldName="title"))}}
 	</h3>
 </header>

 <div class="modal-body">
 	{{yield (hash for=(component 'content-for' yieldName="body"))}}
 </div>

 <div class="modal-footer">
 	{{yield (hash 
  		for=(component 'content-for' 
      		 yieldName="footer" 
           yieldArguments=(hash closeButton=(component 'modal-dialog/modal-close-button'))))}}
 </div>
diff --git a/templates.components.modal-dialog.modal-close-button.hbs b/templates.components.modal-dialog.modal-close-button.hbs
 <button>
 	{{buttonText}}
 </button>
diff --git a/tests.helpers.destroy-app.js b/tests.helpers.destroy-app.js
 import Ember from 'ember';

 export default function destroyApp(application) {
  Ember.run(application, 'destroy');
 }
diff --git a/tests.helpers.resolver.js b/tests.helpers.resolver.js
 import Resolver from '../../resolver';
 import config from '../../config/environment';

 const resolver = Resolver.create();

 resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
 };

 export default resolver;
diff --git a/tests.helpers.start-app.js b/tests.helpers.start-app.js
 import Ember from 'ember';
 import Application from '../../app';
 import config from '../../config/environment';

 const { run } = Ember;
 const assign = Ember.assign || Ember.merge;

 export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
 }
diff --git a/tests.test-helper.js b/tests.test-helper.js
 import resolver from './helpers/resolver';
 import {
  setResolver
 } from 'ember-qunit';

 setResolver(resolver);
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';
	import computed from 'ember-computed';
	import layout from '../templates/components/content-for';

	let ContentFor = Ember.Component.extend({
	layout,
	tagName: '',

	hasContentForYield: computed('contentName', 'yieldName', function() {
	return (this.get('contentName') === this.get('yieldName'));
	}),

	yieldContent: computed('hasContentForYield', 'yieldArguments', function() {
	if (this.get('hasContentForYield')) {
	return this.get('yieldArguments');
	}
	})
	});

	ContentFor.reopenClass({
	positionalParams: ['contentName']
	});

	export default ContentFor;
	import Ember from 'ember';

	export default Ember.Component.extend({
	classNames:['modal-dialog']
	});
	import Ember from 'ember';

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

	actions: {
	close() {
	alert('close triggered');
	}
	}
	});
	body {
	margin: 12px 16px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 12pt;
	}

	.modal-dialog {
	display:block;
	border:1px solid #CCC;
	width: auto;
	margin: 20px;
	background-color:#F6F6F6;
	}

	.modal-body {
	padding: 15px 20px;
	min-height:150px;
	}

	.modal-header {
	padding: 5px 20px;
	border-bottom:1px solid #CCC;
	}

	.modal-header h3 {
	padding: 10px 0;
	margin:0;
	}

	.modal-footer {
	border-top:1px solid #CCC;
	padding: 10px 20px;
	min-height:20px;
	}
	{{#modal-dialog as \|content\|}}
	{{#content.for "title"}}
	A simple(ish) pattern for multiple content areas in a component
	{{/content.for}}
	{{#content.for "body"}}
	<p>
	Most of the complexity is hidden from the consumer, although there are some oddities with some of the outputted source, and when you put things outside of one of these `content.for` blocks.
	</p>
	<p>
	It would be great if the complexity in modal-dialog.hbs could be hidden away in a template helper so then this could be made into an addon (maybe), but initializing a component from a template helper doesn't seem to be straight forward.
	</p>
	{{/content.for}}
	{{#content.for "footer" as \|args\|}}
	{{args.closeButton buttonText="Close" click=(action 'close')}}
	{{/content.for}}
	{{/modal-dialog}}
	<header class="modal-header">
	<h3>
	{{yield (hash for=(component 'content-for' yieldName="title"))}}
	</h3>
	</header>

	<div class="modal-body">
	{{yield (hash for=(component 'content-for' yieldName="body"))}}
	</div>

	<div class="modal-footer">
	{{yield (hash
	for=(component 'content-for'
	yieldName="footer"
	yieldArguments=(hash closeButton=(component 'modal-dialog/modal-close-button'))))}}
	</div>
	import Ember from 'ember';

	export default function destroyApp(application) {
	Ember.run(application, 'destroy');
	}
	import Resolver from '../../resolver';
	import config from '../../config/environment';

	const resolver = Resolver.create();

	resolver.namespace = {
	modulePrefix: config.modulePrefix,
	podModulePrefix: config.podModulePrefix
	};

	export default resolver;
	import Ember from 'ember';
	import Application from '../../app';
	import config from '../../config/environment';

	const { run } = Ember;
	const assign = Ember.assign \|\| Ember.merge;

	export default function startApp(attrs) {
	let application;

	let attributes = assign({rootElement: "#test-root"}, config.APP);
	attributes = assign(attributes, attrs); // use defaults, but you can override;

	run(() => {
	application = Application.create(attributes);
	application.setupForTesting();
	application.injectTestHelpers();
	});

	return application;
	}
	import resolver from './helpers/resolver';
	import {
	setResolver
	} from 'ember-qunit';

	setResolver(resolver);