Comparaison de texte {{if}} Modèle JQuery

Question

Je cherche à utiliser le plugin jQuery Templates pour certains formulaires que je crée - les données sont chargées dans JSON à partir de ReST Uri.

Le problème que je rencontre est d'essayer de faire une condition pour montrer soit une étiquette ou un champ de texte en fonction d'une valeur de variable. J'aime vraiment les modèles jQuery mais peut-être que c'est complètement la mauvaise façon d'y aller - ça me semble mieux que de construire l'élément - qu'en pensez-vous?

Voici ce que j'ai:

Modèle:

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

données et modèle d'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> 

J'ai une seule div sur la page:

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

Merci pour votre temps et j'espère que vous pourrez me mettre sur la bonne voie.

Jim

Answer 1

Vous pouvez utiliser {{if}} pour que:

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