Ember Content For

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;

components.modal-dialog.js

import Ember from 'ember';

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

components.modal-dialog.modal-close-button.js

import Ember from 'ember';

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

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  actions: {
    close() {
    	alert('close triggered');
    }
  }
});

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;
}

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}}

templates.components.content-for.hbs

{{#if hasContentForYield}}
  {{yield yieldContent}}
{{/if}}

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>

templates.components.modal-dialog.modal-close-button.hbs

<button>
	{{buttonText}}
</button>

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

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;

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;
}

tests.test-helper.js

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

setResolver(resolver);

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": {}
}