文本比较{{if}} JQuery模板(Text comparison {{if}} JQuery Template)

文本比较{{if}} JQuery模板(Text comparison {{if}} JQuery Template)

我正在寻找使用jQuery模板插件来创建一些表单 - 数据从ReST Uri的JSON中加载。

我遇到的问题是试图做一个条件来显示一个标签或文本字段取决于一个变量值。

我非常喜欢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>

谢谢你的时间，我希望你能把我放在正确的轨道上。

吉姆

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

最满意答案

您可以使用{{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>

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>