Wie könnte der DOM
-Baum zu exakt diesem Quelltext aussehen?
<ul>
{% for val in (1..500) %}
<li>{{ val }}</li>
{% endfor %}
</ul>
Ohne den Einsatz der Liquid-Rendering-Engine handelt es sich bei den Liquid-Tags einfach um “normale” Texte. Der Baum enthält dementsprechend nicht 500-<li>
-Elemente sondern die eine Vorlage aus dem Rumpf der “Schleife”.
Wie könnte der mit Liquid gerenderte DOM
-Baum zu diesem Template aussehen?
{
"name": "Virgin Cuba Libre",
"ingredients": ["Coke"]
}
<dl>
<dt>{{ page.name }} - {{ page.ingredients | size }} Zutaten</dt>
<dd>
<ol>
{% for ing page.ingredients %}
<li>{{ ing }}</li>
{% endfor %}
</ol>
</dd>
</dl>
Was ist an diesem Liquid-Template syntaktisch fehlerhaft?
{
"lucky_number": 7
}
<span>
Aller guten Dinge sind
{% for i in (0..page.lucky_number - 1) %}
<strike>{{ i + 1 }}</strike>
{% endfor %}
{{ page.lucky_number }}
</span>
Was ist an dem von diesem Liquid-Template generierten HTML fehlerhaft?
{
"links": [
{ "title": "Tentakelvilla" },
{ "title": "Trump Donald", "url": "http://trumpdonald.org/" },
]
}
<ul>
{% for link in page.links %}
<li>
{% if link.url %}
<a href="{{ link.url"
{% endif %}
{{ link.title }}
{% if link.url %}
</a href="{{ link.url"></li>
{% endif %}
{% endfor %}
</ol>
<ul>
wird mit </ol>
geschlossen<a
-Element fehlt eine spitze Klammer am Ende</a>
-Element hat Attribute<li>
Element wird nur für Links mit url
geschlossen