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

【问题标题】：How to use bracket notation of object in handlebar template?如何在车把模板中使用对象的括号表示法？
【发布时间】：2023-04-06 10:17:01
【问题描述】：

我正在从路由模板属性创建一个 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-选择hbs文件

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

如果我使用option.name 而不是option[valueProp]，它就完美了。我如何动态地将属性传递给 select ？为什么括号符号不起作用

组件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="{{option}}">{{option[valueProp]}}

【问题讨论】：

标签： javascript templates ember.js handlebars.js

【解决方案1】：

您可以使用{{get}} 助手：

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

【讨论】：

【解决方案2】：

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

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

试试这个：

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

【讨论】：

为什么我会出错。 ember.debug.js:16628 未捕获错误：断言失败：找不到名为“lookup”的帮助程序
hmm.. 也许你有旧版本的 ember。您可以自己编写车把查找助手。这很简单。这里提到了帮助代码：stackoverflow.com/questions/29829723/….
我正在使用 ember 2.4.2 仍然显示该错误。查找被贬低了吗？为它编写助手是个好主意吗？
这是一个在 Ember 中不可用的 Handlebars 助手。