Hanldebars/JSON - 填充带有 optgroups 的 select 框

Question

数据集：

{
    "data": {
        "some": [],
        "other": [],
        "goes": [],
        "workoutUnitLabels": [{
            "groupLabel": "DISTANCE",
            "selected": "",
            "unitID": 2,
            "unitLabel": "Meters"
        }, {
            "groupLabel": "DISTANCE",
            "selected": "",
            "unitID": 3,
            "unitLabel": "Miles"
        }, {
            "groupLabel": "DISTANCE",
            "selected": "",
            "unitID": 4,
            "unitLabel": "Yards"
        }, {
            "groupLabel": "TIME",
            "selected": "selected",
            "unitID": 5,
            "unitLabel": "Time (hh:mm:ss)"
        }, {
            "groupLabel": "VELOCITY",
            "selected": "",
            "unitID": 6,
            "unitLabel": "Velocity (m/s)"
        }]
    }
}

鉴于上面的数据集，我试图将其传递给车把模板，但无法弄清楚我需要执行的循环才能使其正常工作。以下是我要构建的内容：

<select>
    <optgroup label="DISTANCE">
        <option value="2">Meters</option>
        <option value="3">Miles</option>
        <option value="4">Yards</option>
    </optgroup>
    <optgroup label="TIME">
        <option value="5">Time (hh:mm:ss)</option>
    </optgroup>
    <optgroup label="VELOCITY">
        <option value="6">Velocity (m/s</option>
    </optgroup>

但这就是我目前正在做的（注意 DISTANCE 重复了）。

<select>
    <optgroup label="DISTANCE">
        <option value="2">Meters</option>
    </optgroup>
    <optgroup label="DISTANCE">  
        <option value="3">Miles</option>
    </optgroup>
    <optgroup label="TIME">
        <option value="5">Time (hh:mm:ss)</option>
    </optgroup>
    <optgroup label="VELOCITY">
        <option value="6">Velocity (m/s)</option>
    </optgroup>
</select>

这是我的车把模板的样子：

{{#each .}}
    <label>some label here <input type="text" name="somename" value="{{somevalue}}" /></label>
    <select>
        {{#workoutUnitLabels}}
            <optgroup label="{{groupLabel}}">
                <option value="{{unitID}}" {{selected}}>{{unitLabel}} ({{unitID}})</option>
            </optgroup>
        {{/workoutUnitLabels}}
    </select>
{{/each}}

关于我需要在此处切换的内容有什么建议吗？

Answer 1

使用车把没有简单的方法，最好先转换数据。也就是说，假设您的数据将始终按 groupLabel 排序，则可以这样做（即使它不漂亮）：

帮手：

Handlebars.registerHelper('notEqPrev', function(index, workoutUnitLabels, options) {
    let prev = index - 1 < 0 ? 0 : index - 1;
    if (index === 0 || workoutUnitLabels[prev].groupLabel !== workoutUnitLabels[index].groupLabel) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }
});

HTML:

<label>some label here <input type="text" name="somename" value="{{somevalue}}" /></label>
<select>
    {{#with data.workoutUnitLabels as |work| }}

    {{#each work }}
        {{#notEqPrev @index work }}
            {{#unless @first }}
                </optgroup>
            {{/unless}}
            <optgroup label="{{groupLabel}}">
        {{/notEqPrev}}
                <option value="{{unitID}}" {{selected}}>{{unitLabel}} ({{unitID}})</option>
        {{#if @last}}
            </optgroup>
        {{/if}}
    {{/each}}
    {{/with}}
</select>

Hanldebars/JSON - 填充带有 optgroups 的 select 框

Hanldebars/JSON - populating a select box complete with optgroups

handlebars.js