Как я могу сделать tr с шаблонами сои?

Question

Я получил этот соевый шаблон

{template .myRowTemplate} 
    <tr><td>Hello</td></tr> 
{/template} 

, и я хочу сделать что-то вроде

var myTable = goog.dom.createElement("table"); 
goog.dom.appendChild(myTable, goog.soy.renderAsFragment(mytemplates.myRowTemplate)); 
goog.dom.appendChild(myTable, goog.soy.renderAsFragment(mytemplates.myRowTemplate)); 

Но что вызывает

Uncaught goog.asserts.AssertionError 
Assertion failed: This template starts with a <tr>, 
which cannot be a child of a <div>, as required by soy internals. 
Consider using goog.soy.renderElement instead. 
Template output: <tr><td>Hello</td></tr> 

Какой самый лучший способ сделать это?

Answer 1

Почему он не

Право, документация renderAsFragment немного сбивает с толку; он гласит:

Отображает шаблон сои в единый узел или фрагмент документа. Если оказанные HTML строка представляет собой отдельный узел, то этот узел будет возвращен

Однако (упрощенный) осуществление renderAsFragment является:

var output = template(opt_templateData); var html = goog.soy.ensureTemplateOutputHtml_(output); goog.soy.assertFirstTagValid_(html); // This is your failure var safeHtml = output.toSafeHtml(); return dom.safeHtmlToNode(safeHtml);

Так почему же закрывающим автор утверждает, что первый тег не <tr>?

Это потому, что внутренне, safeHtmlToNode места safeHtml во временном div, прежде чем решить, должен ли он вернуть div wrappper (общий случай) или единственного ребенка (если оказанная HTML представляет собой только один узел). Еще раз упрощена, код safeHtmlToNode является:

var tempDiv = goog.dom.createElement_(doc, goog.dom.TagName.DIV); goog.dom.safe.setInnerHtml(tempDiv, html); if (tempDiv.childNodes.length == 1) { return tempDiv.removeChild(tempDiv.firstChild); } else { var fragment = doc.createDocumentFragment(); while (tempDiv.firstChild) { fragment.appendChild(tempDiv.firstChild); } return fragment; }

renderAsElement не будет работать либо

И я уверен, что вы просите фрагментов, но, к сожалению goog.soy.renderAsElement() будет вести себя так же потому, что он также использует временный div для рендеринга DOM.

renderElement не может быть зациклена

Сообщение об ошибке предлагает goog.soy.renderElement, но это будет работать только если таблица имеет одну строку, так как он заменяет содержание, и не добавляет дочерние узлы.

Рекомендуемый подход

Так обычно, мы делаем цикл в шаблоне:

{template .myTable} <table> {foreach $person in $data.persons} <tr><td>Hello {$person.name}</td></tr> {/foreach} </table> {/template}

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