JQuery шаблон визуализации вывода - PullRequest
Новая
       11

JQuery шаблон визуализации вывода

1 голос
/ 15 ноября 2010

Когда я передаю элементалы HTML как строки в моем объекте, они не преобразуются в элементы при рендеринге, поэтому мой шаблон заполняется следующим образом: 

<tr><td>"<img src="path/pic.png" />"</td></tr>

Если я передаю элементалы DOM, то получаю 

<tr><td>[Object HTMLImageElement]</td></tr>

Как получить фактическое изображение, отображаемое как элемент DOM?

Использование плагина jQuery Template должно помочь значительно сократить использование построения строк HTML.

Редактировать : простой пример, приведенный ниже, который захватывает элементы DOM, а затем передает его в шаблон jquery, который отображает его.

исходный HTML 

<div id="source-id"><a href="http://link/to/this.file" title="foo">bar</a> <img src="path/pic1.png" />pic1_text <img src="path/pic2.png" title="picture 2" />pic2_text</div>
<div id="target-id"><div>

jquery template 

<script type="text/x-jquery-tmpl" id="linkTemplate"><table><tr><td>${link}</td><td>${img}</td></tr></table></script>

jquery 

var data = {
 'link': '',
 'img': ''
};
var source_data = $('#source-id');
data.link = $(source_data).find('a').eq(0).clone()[0];
data.img = $(source_data).find('img').eq(1).clone()[0];
$('#target-id').html($('#linkTemplate').tmpl(data));

Вывод 

<table><td>http://link/to/this.file</td><td>[object HTMLImageElement]</td></table>

Как видите, AnchorElement () не работает и изображение не отображается.
Пример JS-скрипки

Ответы [ 2 ]

3 голосов
/ 16 ноября 2010

Таким образом, в основном проблема заключается в том, как получить базовый HTML из элемента DOM.Для этого можно использовать свойство outerHTML: 

data.img = $(source_data).find('img').eq(1).clone()[0].outerHTML;

, которое должно возвращать <img src="path/pic2.png" title="picture 2" /> в виде строки.

UPDATE Механизм шаблонов JQuery автоматически экранирует значения перед отображением, для отображения необработанного HTML без экранирования необходимо изменить шаблоны: 

<script type="text/x-jquery-tmpl" id="linkTemplate">
    <table><tr>
        <td>{{html link}}</td>
        <td>{{html img}}</td>
    </tr></table>
</script>

(по-прежнему необходимо outerHTML)

0 голосов
/ 15 ноября 2010

Вот пример рабочего кода: 

<td class="test"></td>
<script>
  $('.test').append('<img src="path/pic.png">');
</script>
...