文本比较 {{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 id="divRForm"></div>

感谢您的时间，我希望您能帮助我找到正确的方向。

Jim

- jimjim

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>

- Dave Ward

---

非常感谢 - 我的 if 语句中语法有误。我写成了 {{if ${$value.Type} == "Label"}}。再次感谢！ - jimjim

$value 是什么？我试图给它赋值，但它显示 $value 未定义。 - kbvishnu

@VeeKayBee：在这个例子中，渲染模板时使用data.Options中的每个项目作为模板。 - Dave Ward