Сравнение текста {{if}} Шаблон JQuery

Question

Я хочу использовать плагин jQuery Templates для некоторых форм, которые я создаю - данные загружаются в JSON из ReST Uri.

Проблема, с которой я столкнулся, заключается в попытке условного отображения метки или текстового поля в зависимости от значения переменной.

Мне действительно нравятся шаблоны 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>

Спасибо за ваше время, и я надеюсь, что вы можете поставить меня на правильный путь.

Jim

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>