mustache - 使用 mustache 模板，将选择列表中的正确选项标记为已选择

Question

我有一个使用 Mustache 模板的服务器渲染表单。提交表单时，如果出现错误，我会重新显示表单以及一些错误。我希望使用提交的相同值重新填充字段。

但是，我不确定如何从选择列表中标记正确的项目。这是我的数据:

errors = {'required': ['name']}, 
fields = {name: 'Matt', option: 'sales'};

我使用这样的模板:

<form method="post" action="submitform" id="submitform">
    <input type="text" id="name" name="name" value="{{fields.name}}">
    <select name="contact" id="contact">
        <option value="support">Support request</option>
        <option value="sales">Sales help</option>
        <option value="press">Press information</option>
    </select>
    <button type="submit" name="submit">Send message</button>
</form>

在此示例中，我希望选择中的第二个选项具有 selected 属性。在这种情况下我不想使用 Javascript。有什么建议吗？

我喜欢 Mustache 提供的无逻辑模板的概念，但我仍在思考实际的细节。

在具有更多逻辑的工具中，例如 Django 模板，我可能会说:

<option value="sales" {%if fields.option == 'sales'}selected{% endif %}>

感谢您的任何提示。

Answer 1

mustache 并非完全没有逻辑。它只是大部分缺乏逻辑。

模型上的每一行都有一个名为“selected”的字段，然后像这样输出:

<form method="post" action="submitform" id="submitform">
    <select name="contact" id="contact">
        {{#options}}
            <option name="{{name}}" {{selected}}>{{name}}</option>
        {{/options}}
    </select>
    <button type="submit" name="submit">Send message</button>
</form>

你的模型看起来像这样(顺便说一句，这是Java，你可以在任何地方做同样的事情:

    public class Option {
        public String name;
        public String selected;

        public Option(String name, boolean seleted){
            this.name = name;
            this.selected = seleted ? "selected" : "";
        }
    }