javascript - 遍历 ember.js 车把模板中的键值对
问题描述
我有一个 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}}
我对这个解决方案不满意,因为它看起来很麻烦:首先我将 object 转换为具有非动态键的辅助对象数组attribute_name
和attribute_value
,然后我直接在模板中引用非动态名称。
它工作正常,但有更好的方法吗?
解决方案
我对此的建议与您在问题解释中已经描述的解决方案没有什么不同;但我的建议将为您提供一种更可重用和更each-in
类似于助手的方法:
如何使用命名的位置参数创建一个无标记的上下文组件each-in-component
并将所有计算的属性定义移动到该组件。我使用的是 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}}
所以你现在可以像常规一样使用该组件each-in
;这在 Ember 1.x 中不存在。
{{#each-in-component attributes as |key value|}}
{{key}} : {{value}}<br>
{{/each-in-component}}
用这种方法;您可以多次重复使用相同的组件,并且您不想在自己的组件中包含的代码将位于each-in-component
. 我已经总结了我的解决方案,以在下面的twiddle中说明它的实际作用。我希望它有效。
推荐阅读
- reactjs - 带有 useEffect 的无限循环 - ReactJS
- python - 如何不使用 Python 将第一列写入 Excel 文件?
- vb.net - 执行时如何将资源文件从 Visual Studio VB NET 应用程序复制到本地系统?
- python-3.x - 从嵌套字典中查找值
- java - 使用tomcat maven插件时如何访问tomcat页面
- django - 在 django 中通过计算获取注释总和
- javascript - 将点击事件处理程序添加到在初始页面呈现后呈现的 React 组件
- sql - 在 Oracle ROLLUP 中结合 MAX 和 SUM
- ruby - Rspec 测试方法的提升和救援
- playframework - 在 Play 中分析内存使用情况!框架