奇怪的jquery .tmpl递归

问题描述：

我在这里有一个真正的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

答

你试图巢<optgroup>元素，但是这是无效的HTML。 HTML-5 has this to say about <optgroup>：

上下文在此元件可用于：
作为select元素的子元素。
内容模型：
零个或多个option元素。

而且HTML-4 has this to say：

在HTML 4中，所有OPTGROUP元件必须直接一个SELECT元素中指定（即，基团可以不被嵌套）。

所以你给浏览器无效的HTML和浏览器正试图通过unnesting的错误嵌套<optgroup>元素加以纠正。一旦浏览器完成了更正你的HTML，你的嵌套就消失了，并得到你所看到的奇怪行为。

你如何解决这个问题？对于JavaScript版本，您可以使用嵌套的<ul>（隐藏的<div>），对于非JavaScript版本，可以使用嵌套的<optgroup>元素完全不同的<select>。您还可以尝试使用额外的深度属性来玩弄技巧，这样您的JavaScript就可以重新生成嵌套（我之前完成了这一步，并不意味着它可能是个好主意）。

奇怪的jquery .tmpl递归

相关推荐