Skip to content

Instantly share code, notes, and snippets.

@alexlafroscia
Last active May 12, 2017 00:42
Show Gist options
  • Save alexlafroscia/d3132a66f64aa36b66a8a409b649beb1 to your computer and use it in GitHub Desktop.
Save alexlafroscia/d3132a66f64aa36b66a8a409b649beb1 to your computer and use it in GitHub Desktop.
Passing component through HBS
This is the child component!
<h1>Passing Components as Data: Examples</h1>
<h2>Yielding a component into a block</h2>
<p>In these examples, a child component is yielded from a parent component into its block, and then rendered there</p>
<h3>Using a hash</h3>
{{#with-hash/yield-to-block as |data|}}
{{data.child}}
{{/with-hash/yield-to-block}}
<h3>Not using a hash</h3>
{{#without-hash/yield-to-block as |child|}}
{{component child}}
{{/without-hash/yield-to-block}}
<h2>Passing a component into another</h2>
<p>In these exampls, a parent component is given a child component to render</p>
<h3>Using a hash</h3>
{{with-hash/pass-as-property
data=(hash
child=(component 'child-component'))
}}
<h3>Not using a hash</h3>
{{without-hash/pass-as-property
child=(component 'child-component')
}}
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 { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('with-hash/pass-as-property', 'with-hash/pass-as-property', {
integration: true
});
test('it renders the child component', function(assert) {
this.render(hbs`
{{with-hash/pass-as-property
data=(hash
child=(component 'child-component'))
}}
`);
assert.equal(this.$().text().trim(), 'This is the child component!');
});
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('with-hash/yield-to-block', 'with-hash/yield-to-block', {
integration: true
});
test('it renders the child component correctly', function(assert) {
this.render(hbs`
{{#with-hash/yield-to-block as |data|}}
{{data.child}}
{{/with-hash/yield-to-block}}
`);
assert.equal(this.$().text().trim(), 'This is the child component!');
});
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('without-hash/pass-as-property', 'without-hash/pass-as-property', {
integration: true
});
test('it renders the child component', function(assert) {
this.render(hbs`
{{without-hash/pass-as-property
child=(component 'child-component')
}}
`);
assert.equal(this.$().text().trim(), 'This is the child component!');
});
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('without-hash/yield-to-block', 'without-hash/yield-to-block', {
integration: true
});
test('it renders the child component correctly', function(assert) {
this.render(hbs`
{{#without-hash/yield-to-block as |child|}}
{{component child}}
{{/without-hash/yield-to-block}}
`);
assert.equal(this.$().text().trim(), 'This is the child component!');
});
import resolver from './helpers/resolver';
import {
setResolver
} from 'ember-qunit';
setResolver(resolver);
{
"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"
}
}
{{yield (hash
child=(component 'child-component')
)}}
{{yield (component 'child-component')}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment