代码之家 › 专栏 › 技术社区 › HPWD

Hanldebars/JSON—填充包含optgroups的选择框

handlebars.js

HPWD · 技术社区 · 6 年前

{
    "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)"
        }]
    }
}

考虑到上面的数据集,我试图将其传递给一个handlebar模板,但无法找出使其正常工作所需的循环。以下是我希望构建的内容:

<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}}

有什么建议我需要在这里换车吗?

1 回复 | 直到 6 年前

GMachado 6 年前

使用手柄并没有简单的方法,最好先转换数据。也就是说,假设您的数据总是由 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>