Почему строковые массивы JavaScript по-разному интерпретируются тегами jQuery template {{each}} и jQuery $ .each? - PullRequest
Новая
       24

Почему строковые массивы JavaScript по-разному интерпретируются тегами jQuery template {{each}} и jQuery $ .each?

4 голосов
/ 15 сентября 2011

Обязательный Пример jsFiddle .

Когда я запускаю массив строк через функцию $.each jQuery, я получаю то, что ожидаю. 

$.each(["abc", "123", "def", "456"], function (i, val) {
    $("<li></li>").text("source[" + i + "]: " + val).appendTo(".eachResults");
    // run for each string in the array ("abc", "123", ...)
});

Когда язапустить тот же массив строк с помощью оператора {{each}} в шаблоне jQuery, однако он обрабатывает его как двумерный массив char s. 

<script id="testTemplate" type="text/x-jquery-tmpl"> 
<ul>
    {{each(i, prop) $data}}
    {{if $data.hasOwnProperty(i)}}
    <li>
        source[${i}]: ${$data[i]}
        {{! run for each char of each string in array (0:"a", 1:"b", 2:"c", 0:"1", 1:"2", 3:"3", ...)}}
    </li>
    {{/if}}
    {{/each}}
</ul>
</script>

$("#testTemplate").tmpl(["abc", "123", "def", "456"]).appendTo(".tmplResults");

, поскольку i в шаблоне всегда кажетсяправильно сослаться на $data, я не имею ни малейшего понятия, как эта индексация работает вообще.Кажется, что i должен был бы быть двумерным индексом, чтобы работать правильно, но это не похоже на (typeof (i) === "number").

Дополнительный вопрос

@mblase75 определенно объяснил проблему здесь.К сожалению, учитывая, что это было подмножество моего реального кода, оказалось, что он просто поднял другой вопрос о рекурсивном вызове шаблона {{each}}, когда вы натолкнетесь на массив строк .

1 Ответ

4 голосов
/ 15 сентября 2011

Помните, что шаблоны являются неявным циклом. Ваш исходный {{each}} проходил по каждому символу в каждой строке - шаблон проходил по каждой строке в массиве.

Это даст вам желаемый результат (более или менее): 

<script id="testTemplate" type="text/x-jquery-tmpl"> 
    <li>
        source[]: ${$data}
    </li>
</script>

http://jsfiddle.net/wuEyp/10/ использует вышеуказанный код. Индекс пропал, потому что шаблон, кажется, не обеспечивает его на «корневом» уровне.

http://jsfiddle.net/wuEyp/11 добавит индексирование обратно с помощью функции. По какой-то причине я не могу сделать это правильно с закрытием.

...