Wie wird die Klammernotation des Objekts in der Lenkervorlage verwendet?

Question

Ich erstelle eine emberjs-Komponente aus dem Attribut route template Übergeben Sie den Wert, der in der Vorlage angezeigt werden soll. Aber ich kann nicht in der Komponentenvorlage durch Klammern Notation des Objekts zugreifen.

//route.hbs 
{{b-select 
    options=model.names 
    valueProp='name' 
}} 

Modell

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model() { 
     return Ember.RSVP.hash({ 
      names: [{name: 'abc'}, {name: 'xyz'}] 
     }); 
    } 

}); 

Komponente b-select hbs Datei

<select class="form-control" multiple={{multiple}}> 
    {{#each options as |option|}} 
    <option value="{{option}}">{{option[valueProp]}}</option> 
    {{/each}} 
</select> 

Wenn ich option.name statt option[valueProp] verwenden funktioniert es perfekt. Wie kann ich die Property zur Auswahl dynamisch übergeben? warum die Klammer-Notation nicht funktioniert

Component JS-Datei

import Ember from 'ember'; 
import fallbackIfUndefined from '../utils/computed-fallback-if-undefined'; 

export default Ember.Component.extend({ 
    multiple: fallbackIfUndefined(false), 
    options: fallbackIfUndefined(null), 
    valueProp: fallbackIfUndefined(0), 
    actions: { 

    }, 
    didInsertElement() { 
     //initialize jquery functions 
     this.$('select').selectpicker({size: 6}); 
    }, 
    willDestroyElement() { 
     //remove all events 
    } 
}); 

Der Fehler Ich erhalte ist

Fehler: Parse error on line 3: ... ert = "{{Option }} "> {{option [valueProp]}} < -----------------------^ Erwartung 'ID', 'STRING', 'NUMMER ',' BOOLEAN ',' UNDEFINIERT ',' NULL ',' DATEN ', bekam' INVALID '

Answer 1

Sie die {{get}} Helfer verwenden können:

<option value="{{option}}">{{get option valueProp}}</option>

Answer 2

Sie den Lenker Lookup-Helfer verwenden können:

http://handlebarsjs.com/builtin_helpers.html#lookup

Try this:

<option value="{{option}}">{{lookup option valueProp}}</option>