Text comparison {{if}} JQuery Template

Question

I am looking to use jQuery Templates plugin for some forms I am creating - data is loaded in JSON from ReST Uri.

The issue I am having is trying to do a conditional to show either a label or textfield depending on a variable value.

I really like the jQuery Templates but maybe its completely the wrong way to go - it jsut seems better to me than building up the element - what do you think?

Here is what I have:

Template:

<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>

Data and template application:

<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>

I have a single div on the page:

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

Thanks for your time and I hope you can put me on the right track.

Jim

Answer 1

You can use {{if}} for that:

            <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>