代码之家 › 专栏 › 技术社区 › João Pimentel Ferreira

使用手柄渲染选中选项的HTML select元素

handlebars.js

João Pimentel Ferreira · 技术社区 · 7 年前

我呈现HTML select 使用把手,但如果选定值本身已经是渲染数据属性,则无法设置该值。我发现 other 这样的解决方案并不令人满意,因为它们没有解决这一特定问题。

我试过了

<select>
    {{#each countriesList}}
    <option value="{{@key}}" {{{isSelected ./setCountry @key}}}>
        {{this}}
    </option>
    {{/each}}
</select>

我有以下几点 helper 尝试设置所选值

isSelected: function (Country, key) {
    return Country === key ? 'selected' : ''; 
}

我在expressjs中渲染

var countries = {'en': 'England', 'fr': 'France', 'de' : 'Germany'};
var data = {'countriesList':countries, 'setCountry': 'fr'};
res.render('home', data);

它应该将France选项设置为selected选项,但它不起作用!我还尝试从helper函数获取渲染属性,但没有成功。有什么想法吗?

1 回复 | 直到 7 年前

João Pimentel Ferreira 5 年前

我找到了解决办法。显然这与圆点有关。而不是 ./ 应该是这样的 ../ 以引用主数据变量。现在它工作了

<select>
    {{#each countriesList}}
    <option value="{{@key}}" {{{isSelected ../setCountry @key}}}>
        {{this}}
    </option>
    {{/each}}
</select>

帮手:

isSelected: function (Country, key) {
    return Country === key ? 'selected' : ''; 
}

expressjs:

var countries = {'en': 'England', 'fr': 'France', 'de' : 'Germany'};
var data = {'countriesList':countries, 'setCountry': 'fr'};
res.render('home', data);

推荐文章