странная jquery .tmpl рекурсия - PullRequest
Новая
       7

странная jquery .tmpl рекурсия

0 голосов
/ 09 октября 2011

У меня есть настоящий головной убор.Я использую .tmpl для создания содержимого иерархического выпадающего списка.Когда я использую данные и шаблон для простого создания вложенных div, библиотека tmpl работает довольно хорошо.

Но когда я использую очень похожий шаблон для создания групп опций и опций, которые входят в выборку, они вообще не правильно вкладываются.

Пример здесь: Пример jsfiddle

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

И эти плагины:

1 Ответ

0 голосов
/ 09 октября 2011

Вы пытаетесь вложить элементы <optgroup>, но это недопустимый HTML. HTML-5 может сказать о <optgroup>:

Контексты, в которых этот элемент может использоваться:
Как потомок элемента select.
Модель содержимого:
Ноль или более option элементов.

И HTML-4 имеет это, чтобы сказать :

В HTML 4 все элементы OPTGROUP должны быть указаны непосредственно в элементе SELECT (т. Е. Группы могут не быть вложенными).

Итак, вы предоставляете браузеру неверный HTML, и браузер пытается исправить его, удалив недопустимо вложенные элементы <optgroup>. Как только браузер закончит исправление вашего HTML, ваше вложение исчезнет и вы увидите странное поведение, которое вы видите.

Как вы решаете это? Вы можете использовать вложенные <ul> s (внутри скрытого <div>) для версии JavaScript и совершенно другие <select> без вложенных <optgroup> элементов для версии не-JavaScript. Вы также можете попробовать сыграть трюки с дополнительным атрибутом глубины, чтобы ваш JavaScript мог перестроить вложение (я уже делал это раньше, это не значит, что это хорошая идея, что это возможно).

...