title: Text comparison {{if}} JQuery Template
body: <p>I am looking to use jQuery Templates plugin for some forms I am creating - data is loaded in JSON from ReST Uri.</p>
  
  <p>The issue I am having is trying to do a conditional to show either a label or textfield depending on a variable value.</p>
  
  <p>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?</p>
  
  <p>Here is what I have:</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;script type="x-jquery-tmpl" id="tmplForm"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="title"&gt;Title&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" name="title" id="title" value="${Title}" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="description"&gt;Description&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;textarea name="description" id="description" rows="5" cols="20"&gt;"${Description}"&lt;/textarea&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;label for="optiosn"&gt;Options&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;table id="env"&gt;
                      {{each Option}}
                          &lt;tr&gt;
                              &lt;td&gt;${$value.Name}&lt;/td&gt;
                              &lt;td&gt;
                              //here is where I would like to be an if on the $value.Type
                              //pseudo
                              //if($value.Type == "Label") {
                              //      &lt;label for="value"&gt;$($value.Value)&lt;/label&gt;
                              //} else {
                              //      &lt;input type="text" name="value" id="value" value="${$value.Value}" /&gt;
                              //}
                              //this is my very ugly attempted hack - which doesnt work either
                              //${$item.getOptionsElement($value)}
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      {{/each}}
                  &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Data and template application:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      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 "&lt;label for='value'&gt;option.Value&lt;/label&gt;";
                  } else {
                      return "&lt;input type='text' name='value' id='value' value='option.Value' /&gt;";
                  }
              }
          }).appendTo("#divRForm");
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I have a single div on the page:</p>
  
  <pre><code>&lt;div id="divRForm"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks for your time and I hope you can put me on the right track.</p>
  
  <p>Jim</p>