Question

我正在从路径模板属性创建一个emberjs组件，我传递的值要在模板中显示。但是我无法通过对象的括号表示法在组件模板中访问它。

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

模型

import Ember from 'ember';

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

});

组件b-select hbs文件

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

如果我使用option.name代替option[valueProp]，那么效果会很好。我怎么能动态地通过选择？为什么括号表示法不起作用

组件JS文件

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
    }
});

我得到的错误是

错误：第3行的解析错误： ... ALUE =＆＃34; {{选项}}＆＃34;＆GT; {{选项[valueProp]}}＆LT; ----------------------- ^ 期待ID＆＃39;，＆＃39; STRING＆＃39;，＆＃39; NUMBER＆＃39;，＆＃39; BOOLEAN＆＃39;＆＃39; UNDEFINED＆＃39;，＆＃39; NULL＆＃39;，＆＃39; DATA＆＃39;，得到＆＃39;无效＆＃39;

Answer 1

您可以使用{{get}}帮助程序：

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

Answer 2

您可以使用车把查找助手：

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

试试这个：

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

如何在车把模板中使用对象的括号表示法？

2 个答案: