Handlebars.js для использования индекса каждого цикла для доступа к другой переменной - PullRequest
Новая
       14

Handlebars.js для использования индекса каждого цикла для доступа к другой переменной

0 голосов
/ 10 апреля 2019

У меня есть следующий объект JavaScript: 

{
    "categories": [{
            "name": "cat0",
            "position": 0
        }, {
            "name": "cat1",
            "position": 1
        }, {
            "name": "cat2",
            "position": 2
        }
    ],
    "series": [{
            "name": "ser0",
            "position": 0,
            "points": [{
                    "id": 114,
                    "name": "ser0cat0",
                    "position": 0
                }, {
                    "id": 82,
                    "name": "ser0cat1",
                    "position": 1
                }
            ]
        }, {
            "name": "ser1",
            "position": 1,
            "points": [{
                    "id": 81,
                    "name": "ser1cat1",
                    "position": 1
                }, {
                    "id": 82,
                    "name": "ser1cat2",
                    "position": 2
                }
            ]
        }, {
            "name": "ser2",
            "position": 2,
            "points": [{
                    "id": 83,
                    "name": "ser2cat0",
                    "position": 0
                }
            ]
        }, {
            "name": "ser3",
            "position": 3,
            "points": [{
                    "id": 82,
                    "name": "ser3cat0",
                    "position": 0
                }
            ]
        }
    ]
}

Как видно, все categories, series и points имеют определенное свойство позиции, но не обязательно точка дляпересечение каждой категории / серии.Я хочу создать таблицу HTML, в которой столбцы заголовков - это имена категорий, первый столбец каждой строки - это имя серии, а оставшиеся столбцы в каждой строке - это либо имена точек, если точка существует, либо «Пусто», напримерследующее:

enter image description here

Моя трудность заключается в том, что для каждого столбца не обязательно указана определенная точка, и если бы она была, я мог бы просто использовать {{#each this.points}}<td><a href="javascript:void(0)" class="hb_point" data-id="{{this.id}}">{{this.name}}</a></td>{{/each}},Вместо этого я (думаю) мне нужно перебрать categories для каждой строки тела и использовать индекс, чтобы определить, существует ли точка для данной ячейки.

Моя попытка приведена ниже, но это приводит к{description: undefined, fileName: undefined, lineNumber: 31, message: "each doesn't match ifeq - 31:7", name: "Error", …} исключение.

Как это можно сделать с помощью Handlebars.js ?

РЕДАКТИРОВАТЬ.Может быть, лучше всего перебрать объект перед отправкой в ​​Handlebars и при необходимости добавить пустые точечные объекты?Реализовано такое и все работает. 

Handlebars.registerHelper('ifeq', function (a, b, options) {
    if (a == b) { return options.fn(this); }
    return options.inverse(this);
});

Handlebars.registerHelper('ifnoteq', function (a, b, options) {
    if (a != b) { return options.fn(this); }
    return options.inverse(this);
});

<table class='tabledragger table' id="chartListCategory">
    <thead>
        <tr>
            <th></th>
            {{#each categories}}
            <th><a href="javascript:void(0)" class="hb_category">{{this.name}}</a><img alt="Delete Category" src="delete.png" title="Delete Category" class="vtip deleteCategory" height="16" width="16"></th>
            {{/each}}
        </tr>
    </thead>
    <tbody>
        {{#each series}}
        <tr>
            <td><a href="javascript:void(0)" class="hb_series">{{this.name}}</a><img alt="Delete Series" src="delete.png" title="Delete Series" class="vtip deleteSeries" height="16" width="16"></td>
            {{#each this.categories as |value key|}}
            {#ifeq points.key.position value.position}}
            <td><a href="javascript:void(0)" class="hb_point" data-id="{{points.key.id}}">{{points.key.name}}</a></td>
            {{/ifeq}}
            {#ifnoteq points.key.position value.position}}
            <td>Empty</td>
            {{/ifnoteq}}
            {{/each}}
        </tr>
        {{/each}}
    </tbody>
</table>
</script>
...