用于处理表单的Handlerbars模板

Handlerbars template for handling forms

本文关键字：Handlerbars 模板 表单 处理 用于      更新时间：2023-09-26

目前我为每个表单创建一个Handlebars模板，并在其中使用value={{user}}。所以我可以很容易地填写任何表格来更新任何实体。但select、radio和ckeckboxs是不同的。有没有什么干净的方法来填充这些元素。它们没有value属性。

<select id='select'>
  <option selected value=user name=test>test</option>
</select>

如您所见，您可以通过将"selected"属性设置为特定选项来控制select的值。

或者你可以尝试嵌入一些javascript代码，比如

document.getElementById('select').value={{user}}

您需要确保您的选项具有正确的值属性集

您可以通过使用each助手来实现这一点。

<select>
    {{#each options}}
        <option>{{this}}</option>
    {{/each}}
</select>

其中options是一个普通数组（["apple", "banana", "pear"]）。

你可以在主页上找到更多信息。还有一个例子，您的数组包含对象，如果您需要指定value属性，这可能很有用。

在stackoverflow上，我发现了以下回复：如何在Handlebars模板中设置选定的选择选项

有一个非常好的解决方案（来自@janjarfalk，由@BlaM编辑）：

使用此分部（使用Jquery）。。。

window.Handlebars.registerHelper('select', function( value, options ){
    var $el = $('<select />').html( options.fn(this) );
    $el.find('[value="' + value + '"]').attr({'selected':'selected'});
    return $el.html();
});

您可以在Handlebars模板中使用｛｛#select status｝｝包装所选内容。。。

<select>
    {{#select status}}
    <option value="Completed">Completed</option>
    <option value="OverDue">OverDue</option>
    <option value="SentToPayer">SentToPayer</option>
    <option value="None">None</option>
    {{/select}}
</select>
相关文章：