Javascript 遍历ember.js Handlebar模板中的键值

我有一个javascript对象

this.attributes = {
            key: value,
            // etc..
        }

我想遍历它并输出key:value

以下是我的解决方案：

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

我提出的模板是：

{{#each ProductAttributes as |attribute|}}
    {{attribute.attribute_name}} : {{attribute.attribute_value}}
{{/each}}

我对这个解决方案不满意，因为它看起来很麻烦：首先，我将对象转换成一个带有非动态键

attribute\u name

和

attribute\u value

的辅助对象数组，然后直接在模板中引用非动态名称

---

它工作正常，但有更好的方法吗？

我的建议与您在问题说明中描述的解决方案没有太大区别；但我的建议将为您提供一种更可重用和更类似于助手的

方法：

如何创建一个无标记上下文组件，每个组件中都有一个名为
的位置参数
，并将所有计算的特性定义移动到该组件中。我使用的是Ember 2.x语法，但我想Ember 1.x不会有太大的不同；因此，该组件将类似于：

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

相应的组件模板将生成计算属性数组：

{{#each objectProperties as |objectProperty|}}
    {{yield objectProperty.key objectProperty.value}}
{{/each}}

因此，您现在可以像使用

中的常规

一样使用该组件；这在Ember 1.x中不存在

{{#each-in-component attributes as |key value|}}
    {{key}} : {{value}}<br>
{{/each-in-component}}

{{{#每个组件属性都作为|键值|}
{{key}}:{{value}}

{{/组件中的每个}

采用这种方法；您可以多次重复使用同一个组件，并且您不希望在自己的组件中包含的代码将位于每个组件中的
中。我已经总结了我的解决方案，以在下面的例子中说明它的作用。我希望它能工作。
您可以直接使用#each in，
{{#each in AttributesObject as | key value |}迭代对象的属性
不幸的是#each in不受Ember 1的支持*