奇怪的 jquery .tmpl 递归答案

【问题标题】：strange jquery .tmpl recursion奇怪的 jquery .tmpl 递归
【发布时间】：2011-10-08 22:24:53
【问题描述】：

我真的很头疼。我正在使用 .tmpl 创建分层下拉组合框的内容。当我使用数据和模板创建嵌套 div 时，tmpl 库工作得非常好。

但是当我使用一个非常相似的模板来创建选择中的 optgroup 和选项时，它们最终根本没有正确嵌套。

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');

还有这些插件：

【问题讨论】：

标签： jquery html combobox jquery-templates

【解决方案1】：

您正在尝试嵌套 <optgroup> 元素，但这是无效的 HTML。 HTML-5 has this to say about <optgroup>:

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

还有HTML-4 has this to say:

在 HTML 4 中，所有 OPTGROUP 元素必须直接在 SELECT 元素内指定（即，组不能嵌套）。

因此，您向浏览器提供了无效的 HTML，而浏览器正试图通过取消嵌套无效的 <optgroup> 元素来纠正它。浏览器完成对 HTML 的更正后，您的嵌套就会消失并出现您所看到的奇怪行为。

你如何解决这个问题？对于 JavaScript 版本，您可以使用嵌套的 <ul>s（在隐藏的 <div> 内），而对于非 JavaScript 版本，可以使用完全不同的 <select>，而不使用嵌套的 <optgroup> 元素。您还可以尝试使用额外的深度属性来玩技巧，以便您的 JavaScript 可以重建嵌套（我以前做过，但这并不意味着它是一个好主意，只是它是可能的）。

【讨论】：