Dynamic property names

components.if-dynamic.js

import Ember from "ember";

export default Ember.Component.extend({
  staticValue: Ember.computed("condition", "scenario", function() {
    let key = this.get("condition");
    return this.get("scenario").get(key);
  }),

  init() {
    this._super(...arguments);
    Ember.defineProperty(
      this,
      "dynamicValue",
      Ember.computed(`scenario.${this.get("condition")}`, function() {
        let key = this.get("condition");
        return this.get("scenario").get(key);
      })
    );
  }
});

components.if-get.js

import Ember from 'ember';

export default Ember.Component.extend({
  //not really needed for this case
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  conditionName: "foo",
  foo: 23,
  foobar: 42,
  preview: false,
  previewValue: "PREVIEW"
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
Dynamic condition name:{{input value=conditionName}}
<div>
<br>
foo={{input value=foo}}
</div>
<div>
foobar={{input value=foobar}}
</div>
<div>
Preview? (for 'get' helper version only) {{input type="checkbox" checked=preview}}
</div>

{{if-get condition=conditionName scenario=this preview=preview previewValue=previewValue}}
{{if-dynamic condition=conditionName scenario=this}}
<div>
<br>
<div>
<em>Only the 'get' helper version works completely.</em> However, our components have their 'condition' set on initialization, and
that condition should't change over the lifecycle of the component so I don't think it'll be a problem.
What's important for us is the component reflects the new falue of 'foo' as it changes
</div>
<br>
<div>
There's probably a another way to use 'defineProperty' that I'm missing right now, but this twiddle sums up a few of the options.
</div>
</div>
<br>
<br>

templates.components.if-dynamic.hbs

<div> Uses static computed property:
The value of {{condition}} is {{staticValue}}
</div>

<div> Uses dynamic computed property:
The value of {{condition}} is {{dynamicValue}}
</div>

templates.components.if-get.hbs

<div>Uses the 'get' helper: 
The value of {{condition}} is {{if preview previewValue (get scenario condition)}}
</div>

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