Positional Parameters

components.list-properties.js

import Ember from 'ember';

const {computed} = Ember;

const ListPropertiesComponent = Ember.Component.extend({
	object: computed.readOnly('params.firstObject'),
  properties: computed('params.[]', {
    get() {
      let [,...props] = this.get('params');
      return props;
    }
  })
});

ListPropertiesComponent.reopenClass({
  positionalParams: 'params'
});

export default ListPropertiesComponent;

components.my-if.js

import Ember from 'ember';

const MyIfComponent = Ember.Component.extend({
});

MyIfComponent.reopenClass({
  positionalParams: ['predicateValue']
});

export default MyIfComponent;

controllers.application.js

// http://www.serabe.com/2016/02/29/the-path-to-contextual-components-understanding-positional-parameters/

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  logContents: "",
  obj: { a: 'vala', b: 'valb', c:'valc' },
  
  init() {
    this._super(...arguments);
    window.log = function(msg) {
      this.log(msg);
    }.bind(this);
  },
  
  log(msg) {
  	let contents = this.get('logContents'); 
    contents += msg + "\n"
    this.set('logContents', contents);
    let el = $('#console')[0];
    el.scrollTop = el.scrollHeight;
  },
  
  actions: {
    clicked() {
    	log('clicked');
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

#console {
  position: fixed;
	height: 400px;
  width: 100%;
  bottom: 0px;
  left: 0px;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<button {{action 'clicked'}}>Click me</button>
<br>
<br>
{{#my-if false}}
This is true
{{else}}
This is false
{{/my-if}}

{{#list-properties obj 'a' 'b' 'c' tagName='dl' as |key value|}}
	<dt>{{key}}</dt><dd>{{value}}</dd>
{{/list-properties}}

{{outlet}}
<br>
<br>
<textarea id="console">{{logContents}}</textarea>

templates.components.list-properties.hbs

{{#each properties as |prop|}}
	{{yield prop (get object prop)}}
{{/each}}

templates.components.my-if.hbs

{{#if predicateValue}}
Yay!
{{yield}}
{{ else }}
????
{{yield to="inverse"}}
{{/if}}

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}