jquery - 文本比较 {{if}} JQuery 模板

Question

我希望对我正在创建的某些表单使用 jQuery 模板插件 - 数据从 ReST Uri 以 JSON 格式加载。

我遇到的问题是尝试执行条件来根据变量值显示标签或文本字段。

我真的很喜欢 jQuery 模板，但也许它完全是错误的方式 - 它对我来说似乎比构建元素更好 - 你觉得怎么样？

这是我所拥有的:

模板:

<script type="x-jquery-tmpl" id="tmplForm">
    <table>
        <tr>
            <td><label for="title">Title</label></td>
            <td><input type="text" name="title" id="title" value="${Title}" /></td>
        </tr>
        <tr>
            <td><label for="description">Description</label></td>
            <td><textarea name="description" id="description" rows="5" cols="20">"${Description}"</textarea></td>
        </tr>
        <tr>
            <td><label for="optiosn">Options</label></td>
            <td>
                <table id="env">
                    {{each Option}}
                        <tr>
                            <td>${$value.Name}</td>
                            <td>
                            //here is where I would like to be an if on the $value.Type
                            //pseudo
                            //if($value.Type == "Label") {
                            //      <label for="value">$($value.Value)</label>
                            //} else {
                            //      <input type="text" name="value" id="value" value="${$value.Value}" />
                            //}
                            //this is my very ugly attempted hack - which doesnt work either
                            //${$item.getOptionsElement($value)}
                            </td>
                        </tr>
                    {{/each}}
                </table>
            </td>
        </tr>
    </table>
</script>

数据和模板应用:

<script type="text/javascript">

    var data = [
            {
                Id: 1,
                Title: "Title1",
                Description: "Description 1",
                Options: [
                    { Type: "Label", Name: "labelName", Value: "LabelValue" },
                    { Type: "TextField", Name: "txtName", Value: "txtValue" }
                  ]
            }
        ];

        $("#divRForm").empty();

        //$("#tmplForm").tmpl(data).appendTo("#divRForm");

        $("#tmplForm").tmpl(data, {
            getOptionsElement: function (option) {
                if (option.Type == "Label") {
                    return "<label for='value'>option.Value</label>";
                } else {
                    return "<input type='text' name='value' id='value' value='option.Value' />";
                }
            }
        }).appendTo("#divRForm");


</script>

我的页面上有一个 div:

<div id="divRForm"></div>

感谢您的宝贵时间，希望您能让我走上正轨。

吉姆

Answer 1

您可以使用 {{if}} 来实现:

            <table id="env">
                {{each Option}}
                    <tr>
                        <td>${$value.Name}</td>
                        <td>
                        {{if $value.Type == "Label"}}
                          <label for="value">$($value.Value)</label>
                        {{else}}
                          <input type="text" name="value" id="value" value="${$value.Value}" />
                        {{/if}}
                        </td>
                    </tr>
                {{/each}}
            </table>