Добавлять динамические элементы HTML через вызов функции в jquery-tmpl - PullRequest
Новая
       12

Добавлять динамические элементы HTML через вызов функции в jquery-tmpl

2 голосов
/ 22 сентября 2010

Я использую библиотеку шаблонов jquery-tmpl для создания динамического списка <select>. В моем шаблоне есть вызов функции, который возвращает все элементы <option> из существующего элемента <select> на странице.

В моем шаблоне вызов функции выполняется успешно и возвращает .html() из существующего списка <select>, но отображает его как текст в DOM, а не добавляет HTML в список <select>.

Я понимаю, что моя функция только возвращает строку и выглядит так, как будто ее обрабатывают, но я не знаю, как на самом деле получить ссылку на элемент <select> в шаблоне, чтобы выполнить любую функцию jQuery. 1012 *

Как добавить список <option> в элемент HTML шаблона или получить ссылку на элемент шаблона?

Вот мой шаблон: 

<script id="searchTemplate" type="text/x-jquery-tmpl">
    <select id="destinations" class="destinations">
        ${getDestinationList()}
    </select>
</script>

И моя функция вернуть коллекцию <option> в виде строки: 

function getDestinationList(){
    return $("#tabs-0 select[id$='destinations']").html(); //returns HTML list as string successfully
}

Заранее спасибо !!

1 Ответ

2 голосов
/ 22 сентября 2010

Ладно, все извини. Потратил несколько часов, пытаясь выяснить это, и нашел решение через несколько минут после публикации (пощечина).

Решение, которое я нашел, заключалось в использовании функциональности скомпилированного шаблона плагина. Я пробовал это ранее, используя $.template( "#destinationList", getDestinationList() ); и получал ошибки скрипта в браузере. Оказывается, я использовал более старую версию плагина, и у этой функции была подпись $.templates(name, tmpl). Затем я проверил, была ли у меня последняя версия, и увидел, что с тех пор подпись была изменена на $.template(name, tmpl), что соответствует текущей документации. Не уверен, когда это изменилось, но ...

После выяснения этого я смог правильно использовать функциональность скомпилированного шаблона следующим образом: 

<script id="searchTemplate" type="text/x-jquery-tmpl">
   <select id="destinations" class="destinations">
      {{tmpl "#destinationList"}}
   </select>
</script>

А при загрузке страницы определяем скомпилированный шаблон примерно так: 

$(function(){
    $.template( "#destinationList", getDestinationList() );
});

С моей неизменной функцией: 

function getDestinationList(){
    return $("#tabs-0 select[id$='destinations']").html();
}

Приносим извинения всем, кто изучал это, но, надеюсь, это поможет кому-то еще в будущем.

...