Question

尝试实现一个允许您修改现有数据库记录的弹出窗口。作为其中的一部分，我有几个选择框，我需要预先填充现有的选择。我首先想到的这似乎很难做到。这是我的模板

的片段

{{#with myExistingRecord}}
    <select class="myselect">
        {{#each hoursInTheDay}}
            {{#if isSelectedHour}}
                <option selected>{{this}}</option>
            {{else}}
                <option>{{this}}</option>
            {{/if}}
        {{/each}}
    </select>
{{/with}}

我遇到的问题是在isSelectedHour模板函数中，因为this不能有两个定义（第一个是#each值，第二个是记录对象）。我需要将#each循环中的值与我记录中的值进行比较，我想不出一种优雅的方法来做到这一点。我总是可以将记录值设置为Session变量，但那很麻烦。

有没有一种好的，非黑客的方法来做到这一点？

Answer 1

我遇到了同样的问题，令我惊讶的是，有一个很好的方法。您可以访问模板部分中的外部上下文，并且可以使用它将值传递给辅助函数的值。我会按如下方式重写您的代码：

<template name="myTemplate">
{{#with myExistingRecord}}
    <select class="myselect">
        {{#each hoursInTheDay}}
            <option {{selected ../recordHour}}>{{this}}</option>
        {{/each}}
    </select>
{{/with}}
</template>

然后有一个辅助函数：

Template.myTemplate.selected = function(hour) {
    if (hour == currentHour)
        { return "selected ";}
    else 
        { return "";}
};

查看here，了解有关../符号如何工作的详细信息。

Answer 2

最后我决定创建一个简单的Handlebars助手来处理这个问题。如果有人想做类似的事情，这里是帮助代码：

Handlebars.registerHelper('hourOptions', function(selectedHour) {
    var html = '';

    for (var hr = 0; hr < 24; hr++) {
        if (hr === selectedHour)
            html += '<option selected>' + hr + '</option>';
        else
            html += '<option>' + hr + '</option>';
    }

    return new Handlebars.SafeString(html);
});

模板代码变为

{{#with myExistingRecord}}
    <select class="myselect">
        {{hourOptions mySelectedHour}}
    </select>
{{/with}}

在Meteor中预选选项

2 个答案: