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的选择框

1 个答案: