Шаблон jQuery () для помещения URL в атрибут изображения src = - PullRequest
Новая
       4

Шаблон jQuery () для помещения URL в атрибут изображения src =

3 голосов
/ 18 октября 2010

У меня есть шаблон jquery: 

<div id="test_template">
    <img src="${url}" width="31" height="32" alt="" />
    ${url}
</div>

Я скомпилирую его так: 

test_template = $('#test_template').template();

Я рендеринг с этим: 

$.tmpl(test_template, {url:'http://sstatic.net/stackoverflow/img/sprites.png'}).appendTo('#render_test');

конецрезультат таков: 

<div id="render_test">
<img height="32" width="31" alt="" src="$%7Burl%7D">   http://sstatic.net/stackoverflow/img/sprites.png</div>

Я ожидал, что URL будет в теге src = "" ... но это не так (хотя он выводится правильно после тега).если я посмотрю на анонимную функцию, созданную с помощью template (), я увижу, что она не превращает src = "$ {url}" в javascript.он просто кодирует его как HTML и выплевывает обратно

что я делаю не так?

Ответы [ 3 ]

2 голосов
/ 18 октября 2010

что я делаю не так?

Использование реального <img>.

Когда вы используете такие атрибуты, как <img src>, браузер может исправить ваши значениячтобы сделать их действительными.Так как символы {} недопустимы в URL-адресе, браузер может закодировать их в %7B%7D.Это, вероятно, зависит от браузера;Пример Ника, который он говорит, работает неудачно для меня в Firefox.(Он также не работает в IE из-за отсутствия var на test_template, но это не связанная с этим проблема.)

Помните, что когда вы пишете элементы HTML, источник HTML не поддерживается.Браузер проанализирует его в загрузке DOM-узлов.Когда вы вызываете html() (innerHTML), вы получаете сериализацию этих узлов DOM, которая точно не сохраняет форматирование исходной разметки.Особенно, когда исходная разметка не является действительным HTML, а просто заполнителем для шаблонов.

По этой причине я не буду использовать фактические элементы на странице для шаблонов, и я считаю, что jquery-tmpl поощряет этоего $(element).template() метод будет ошибкой.Это не единственная проблема, которую я с плагином.Например, если вы поместите data() или обработчик события на элемент внутри шаблона, эти данные / обработчик будут скопированы случайно в IE, но не в других браузерах, из-за наивного innerHTML копирования и ужасного взлома идентификации узлов jQuery.

Так что если вы должны использовать jquery-tmpl, используйте с ним строки, а не узлы.Если нужно, используйте строки, встроенные в <script>, но не используйте реальные элементы на странице.(Наряду с этой проблемой семантически сомнительно иметь в документе содержимое, которое не является фактическим.)

1 голос
/ 18 октября 2010

Убедитесь, что вы используете последнюю версию плагина шаблонов, у меня нет проблем с использованием последнего плагина и jQuery 1.4.2 или 1.4.3.

Вы можете увидеть рабочую демонстрацию вашего кода здесь .

0 голосов
/ 13 августа 2011

Я исправляю это с помощью уродливого хака, использующего TmplItem: 

        function fixRenderedTemplate(rendered){
            var fixArray = [["img", "src"], ["a", "href"]];
            for (var i=0; i<fixArray.length; i++){
                var tagName = fixArray[i][0];
                var attrName = fixArray[i][1];
                $(tagName, rendered).each(function(index, elem){
                    var data = $(elem).tmplItem().data;
                    var fixTemplate = unescape($(elem).attr(attrName));
                    var url = $.tmpl(fixTemplate, data).text();
                    $(elem).attr(attrName, url);
                });
            }
            return rendered
        }

Просто вызовите функцию в вашем шаблоне

...