Component Arguments

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  
}).reopenClass({
  positionalParams: 'params'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h2>Component Arguments</h2>

{{#with 'ben' as |person|}}
	NAME: {{person}}
{{/with}}

{{#my-component 
	'positionalA' 'positionalB' 
  name='Alex' age=3
  as |aa bb yieldedName|
}}
	<h5>I'm some block content in {{appName}}</h5>
  
  <ul>
  	<li>aa={{aa}}</li>
    <li>bb={{bb}}</li>
    <li>yieldedName={{yieldedName}}</li>
  </ul>
  
{{else}}

	<h5>Inverse block</h5>
  
{{/my-component}}

<hr />

{{my-component 
	'positionalA' 'positionalB' 
  name='Alex' age=3
}}

<hr />


{{component 'my-component' 'a' 'b' name='Ben'}}

templates.components.my-component.hbs

positional params:

<ul>
	<li>{{params}}</li>
  <li>{{params.[0]}}</li>
  <li>{{params.[1]}}</li>
</ul>

named params:

<ul>
	<li>name: {{name}}</li>
  <li>age: {{age}}</li>
</ul>

block param:

{{#if hasBlock}}
	{{yield 'ggg'}}
	{{yield 'aa' 'bb' name}}
  
  <hr />
  
  {{yield to="inverse"}}
{{else}}
  <b>no block provided</b>
{{/if}}

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