Text comparison {{if}} JQuery Template -
i looking use jquery templates plugin forms creating - data loaded in json rest uri.
the issue having trying conditional show either label or textfield depending on variable value.
i jquery templates maybe wrong way go - jsut seems better me building element - think?
here 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 if on $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 ugly attempted hack - doesnt work either //${$item.getoptionselement($value)} </td> </tr> {{/each}} </table> </td> </tr> </table> </script>
data , 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 single div on page:
<div id="divrform"></div>
thanks time , hope can put me on right track.
jim
you can use {{if}}
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>
Comments
Post a Comment