Pass optional content to the inputComponent

[eelke]

In dynamically generated forms (ie. from Model or other data) this allows the inputComponent’s options to be dynamic too.

[jbandura]

I'm sorry for this very late response (was in a middle of job change), but you could you provide a use case for that? :)

[eelke]

Sure! In my use case I needed something like the mr-ms-input, but required more flexibility as the component became part of a sort of form building tool.
So, imagine the options for your mr-ms-input would come from loaded data or a model. Instead of defining these in the handlebars file, they could be added through the handlebar attribute, and we can loop through the options.

My input template looks like this:

  {{#each content as |option|}}
    {{#if option.value}}
      <button type="button" class={{if (eq value option.value) 'selected'}} {{action 'clicked' option.value}}>{{capitalize option.label}}</button>
    {{/if}}
  {{/each}}

And the component code stayed pretty much the same

import Ember from "ember";
import Component from "ember-component";

export default Component.extend({

    classNames: ["form-sex-input"],
    classNameBindings: ["hasSelection"],

    readonly: false,
    hasSelection: Ember.computed.notEmpty("value"),
    value: null,

    actions: {
        clicked(val) {
            if (this.get("readonly")) return;
            this.set("value", val);
            this.get("update")(val);
        }
    }
});

I hope this makes sense and there was not already a better way of doing this ;)