我在这里有一个真正的head-scratcher。我正在使用.tmpl创建分层下拉组合框的内容。当我使用数据和模板创建嵌套div时,tmpl库的工作原理非常好。奇怪的jquery .tmpl递归
但是,当我使用一个非常相似的模板来创建选择内部的optgroups和选项时,它们最终没有正确嵌套。
的例子是在这里:jsfiddle example
的HTML看起来像这样:
<div id="MySelect">
</div>
<select id="MySelectData" style='display: none;'>
</select>
<br />
<div id="MyDiv">
</div>
<script id="MyTemplate" type="text/x-jquery-tmpl">
{{if children}}
<optgroup label='${data}'>
{{tmpl(children) "#MyTemplate"}}
</optgroup>
{{else}}
<option label='${data}'>
${data}
</option>
{{/if}}
</script>
<script id="MyDump" type="text/x-jquery-tmpl">
{{if children}}
<div style="padding: 5px 5px 5px 5px;">
${data}
{{tmpl(children) "#MyDump"}}
</div>
{{else}}
<div style="padding: 5px 5px 5px 5px;">
${data}
</div>
{{/if}}
</script>
而jQuery的(包括数据):
var data = [{
"data": "Corporate",
"children": [{
"data": "Division A",
"children": [{
"data": "Department AA",
"children": [{
"data": "Product AA1"},
{
"data": "Product AA2"}]},
{
"data": "Department AB",
"children": [{
"data": "Product AB1"}]},
{
"data": "Department AC",
"children": [{
"data": "Product AC1"},
{
"data": "Product AC2"},
{
"data": "Product AC3"},
{
"data": "Product AC4"}]}]},
{
"data": "Division B",
"children": [{
"data": "Department BA",
"children": [{
"data": "Product BA2"},
{
"data": "Product BA`1"}]},
{
"data": "Department BB",
"children": [{
"data": "Product BB1"},
{
"data": "Product BB2"},
{
"data": "Product BB3"}]}]},
{
"data": "Division C",
"children": [{
"data": "Department CA",
"children": [{
"data": "Product CA1"}]}]}]}];
$("#MyTemplate").tmpl(data).appendTo('#MySelectData');
$('#MySelect').combo({
selectId: 'MySelectData',
editable: false,
width: 150
});
$("#MyDump").tmpl(data).appendTo('#MyDiv');
而且这些插件:
- https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.js
- http://imagestore2.boomerang.com/img/resources/js/ccombo/2.0.0/jquery.combo.js