How do I configure the md-select component in ember-cli-materialize? What do the options mean?

Question

The example code on the online demo site gives the following example:

{{md-select content=frameworks
    value=framework
    label="Framework"
    prompt="Please choose..."
    optionLabelPath="content.value"
    optionValuePath="content" class="col s12"}}

Is frameworks is some sort of Array on the model/route? I tried defining frameworks like this: frameworks: ["Option 1","Option 2"] and frameworks: [{text:"Option 1",value:"1"},{text:""Option 2"",value:"2"}] but I still get only the empty select element with the default placeholder.

How do the optionLabelPath and optionValuePath options work?

TLDR; How to configure the options (and associated values) on the material select element from ember-cli-materialize addon?

Answer 1

The content is the array to make options from.

organismContent: [
        { value: 'F', display_name: 'Fungi' },
        { value: 'A', display_name: 'Alveolata (alveolates)' },
        { value: 'B', display_name: 'Bryophyta (mosses)' },
]

In template you would use something like this

    ...
    content=organismContent // Array to iterate over
    optionLabelPath="content.display_name" // user sees this field
    optionValuePath="content.value" // user picks this field
    value=run.organism // where the user selected value goes to 
    ...

    ...
    content=organismContent // Array to iterate over
    optionLabelPath="content.display_name" // user sees this field
    xxx // No need value path here
    selection=run.organism // user selects the whole object
    ...

Where optionValuePath is the objects property "value" which gets binded to value=blah . If you use selection=blah instead of value=blah it selects the whole object with "display_name" and "value". First usecase (value=) is when your object selection is string and the second one (selection=) would be when you're using foreign keys (belongsTo).

      export default Ember.Route.extend({    
            model: function() {
                var store = self.get('store');

                    return Ember.RSVP.hash({
                       organismContentFromServer: store.find('somemodel', 1) // you can access this via model.organismContentFromServer
                    });

            },

            setupController: function(controller, model) {
                this._super(controller, model);

                controller.setProperties({
                    organismContent: [], // This property is now accessible in template
                });
            }
    });

Binding controller and model properties to component

{{analysis/analysis-data   <--- This is a component
        run=model.run        <--- This is a model property
        componentorganismContent=organismContent    <-- This is a controller property
}}

now in component hbs

i can do componentorganismContent.length and it accesses controller's organismContent. Or if i do {{run}} it accesses model's hook "Run" If you get the last part ember will be much easier for you ;)