[英]How to use bracket notation of object in handlebar template?
I am creating an emberjs component from the route template attribute I am passing value to show in the template. 我正在通过传递值以在模板中显示的路由模板属性创建emberjs组件。 But I am unable to access it in the component template by bracket notation of object.
但是我无法通过对象的括号符号在组件模板中访问它。
//route.hbs
{{b-select
options=model.names
valueProp='name'
}}
Model 模型
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return Ember.RSVP.hash({
names: [{name: 'abc'}, {name: 'xyz'}]
});
}
});
Component b-select hbs file 组件B-选择HBS文件
<select class="form-control" multiple={{multiple}}>
{{#each options as |option|}}
<option value="{{option}}">{{option[valueProp]}}</option>
{{/each}}
</select>
If I use option.name
instead of option[valueProp]
it works perfect. 如果我使用
option.name
而不是option[valueProp]
则效果很好。 how I can dynamically pass the propery to select ? 我如何动态地通过属性选择? why the bracket notation is not working
为什么括号表示法不起作用
Component JS file 组件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
}
});
The error I am getting is 我得到的错误是
Error: Parse error on line 3: ...alue="{{option}}">{{option[valueProp]}}< -----------------------^ Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'INVALID' 错误:解析第3行的错误:... alue =“ {{option}}”> {{option [valueProp]}} <-------------------- --- ^期望'ID','STRING','NUMBER','BOOLEAN','UNDEFINED','NULL','DATA',得到'INVALID'
您可以使用{{get}}助手:
<option value="{{option}}">{{get option valueProp}}</option>
You can use the handlebar lookup helper: 您可以使用车把查找助手:
http://handlebarsjs.com/builtin_helpers.html#lookup http://handlebarsjs.com/builtin_helpers.html#lookup
Try this: 尝试这个:
<option value="{{option}}">{{lookup option valueProp}}</option>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.