Итерация по значениям ключа в шаблоне руля ember.js - PullRequest
Новая
       38

Итерация по значениям ключа в шаблоне руля ember.js

0 голосов
/ 15 ноября 2018

У меня есть объект javascript 

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

Я хотел бы перебрать его и вывести ключ: значение

Вот мое решение: 

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_name и attribute_value, а затем ссылаюсь на нединамические имена непосредственно в моем шаблоне. ,

Работает нормально, но есть ли лучший способ сделать это?

1 Ответ

0 голосов
/ 03 декабря 2018

Мое предложение для этого ничем не отличается от решения, которое вы уже описали в объяснении вопроса; но мое предложение предоставит вам более многократно используемый и более 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 . Я надеюсь, что это работает.

...