我希望为我正在创建的某些表单使用jQuery Templates插件 - 数据从ReST Uri以JSON加载。
我遇到的问题是尝试按条件显示标签或文本字段,具体取决于变量值。
我真的很喜欢jQuery模板,但也许它完全是错误的方式 - 对我来说,jsut似乎比构建元素更好 - 你觉得怎么样?
这就是我所拥有的:
模板:
<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>
感谢您的时间,我希望您能让我走上正轨。
吉姆
答案 0 :(得分:16)
您可以使用{{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>