奇怪的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');

而且這些插件：

來源

2011-10-08 Dave Kearney

你試圖巢<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就可以重新生成嵌套（我之前完成了這一步，並不意味着它可能是個好主意）。

來源

2011-10-08 22:59:41

奇怪的jquery .tmpl遞歸

回答

相關問題