[英]Iterating through key-values in ember.js handlebars template
I have a javascript object 我有一个JavaScript对象
this.attributes = {
key: value,
// etc..
}
I would like to iterate through it and output key:value 我想遍历它并输出key:value
Here is my solution: 这是我的解决方案:
import Ember from 'ember';
export default Ember.Component.extend({
init() {
this._super(...arguments);
this.attributes = {
'SKU': '123',
'UPC': 'ABC',
'Title': 'Hour Glass'
}
},
ProductAttributes: Ember.computed('attributes', function() {
var attribs = this.get('attributes');
var kvp = Object.keys(attribs).map(key => {
return {
'attribute_name': key,
'attribute_value': attribs[key]
};
});
return kvp;
})});
The template I came up with: 我想出的模板:
{{#each ProductAttributes as |attribute|}}
{{attribute.attribute_name}} : {{attribute.attribute_value}}
{{/each}}
I am not happy with this solution since it looks cumbersome: first I convert object into an array of auxiliary objects with non-dynamic keys attribute_name
and attribute_value
, and then I references non-dynamic names directly within my template. 我对这种解决方案感到不满意,因为它看起来很麻烦:首先我将对象转换为具有非动态键attribute_name
和attribute_value
的辅助对象数组,然后直接在模板中引用非动态名称。
It works fine but is there a better way of doing this? 它工作正常,但是有更好的方法吗?
My suggestion for this is not that different from the solution you had already described in the question explanation; 我的建议与问题解释中已经描述的解决方案没有什么不同; but my suggestion will provide a you a more reusable and more each-in
helper-like approach: 但我的建议将为您提供一种更可重用且更像each-in
助手的方法:
How about creating a tagless contextual component with a positional param named each-in-component
and moving all the computed property definition to that component. 如何创建一个带有名为each-in-component
组件的位置参数的无标签上下文组件,并将所有计算出的属性定义移动到该组件。 I am using kind of Ember 2.x syntax but I guess Ember 1.x will not be very different; 我使用的是Ember 2.x语法,但是我猜Ember 1.x不会有太大的不同。 so that component will be sth. 所以那个部分将是…… like: 喜欢:
import Ember from 'ember';
export default Ember.Component.extend({
objectProperties: Ember.computed('object', function() {
let object = this.get('object');
return Object.keys(object).map(key => {
return {
'key': key,
'value': Ember.get(object, key)
};
});
}),
tagName: ''
}).reopenClass({
positionalParams: ['object']
});
and the corresponding component template will be yielding the computed property array: 相应的组件模板将产生计算出的属性数组:
{{#each objectProperties as |objectProperty|}}
{{yield objectProperty.key objectProperty.value}}
{{/each}}
So you can now use that component just like regular each-in
; 因此,您现在可以像常规的each-in
一样使用该组件; which does not exist in Ember 1.x. 在Ember 1.x中不存在。
{{#each-in-component attributes as |key value|}}
{{key}} : {{value}}<br>
{{/each-in-component}}
With this approach; 用这种方法; you can re-use the very same component multiple times and the code you did not want to have in your very own component will be lying within each-in-component
. 您可以多次重用同一组件,而您不想在自己的组件中使用的代码将位于each-in-component
。 I have wrapped up my solution to illustrate it in action in the following twiddle . 我已经结束了我的解决方案来说明它在以下的动作玩弄 。 I hope it works. 我希望它能起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.