DOM Templates

[insin]

Goal for 2.1 - can we use the DOMBuilder API as the basis for an object-based templating system with template inheritance?

Scattershot thoughts and questions:

• Reuse HTML mock objects in some way or introduce a new mode with its own objects which leverage the element creation function approach?
• Strings for simple things... logic functions - can these be done non-horribly?
• Compile step which keeps track of where logic needs to happen?
• Dummy nodes identify places where logic needs to happen at render time?
• Cloning as much as possible when outputting DOM elements from templates - DocumentFragments all over your face.
• Reuse the same templates to generate DOM elements or HTML.

[insin]

Struggling to think of a non-horrible API for this. Will post purely theoretical examples in comparison to some real, lovely, HTML-based templates, until something sticks.

Template inheritance: child templates can only refine blocks defined in their parents.

$template({extends: "article_base"},
  $block("content",
    DIV({"class": "articles"},
      $for({article: $var("articles")}),
        DIV({id: "article{{ article.id }}"},
          H2("{{ article.title }}"),
          DIV({"class": "body"},
            $html("{{ article.text }}")
          )
        ),
        "In Loop",
      $endfor,
      "Out of Loop"
    ),
    "Out of Element"
  )
);

Equivalent to:

{% extends "article_base.html" %}
{% block content %}
<div class="articles">
{% for article in articles %}
  <div id="article{{ article.id }}">
    <h2>{{ article.title }}</h2>
    <div class="body">
      {{ article.text }}
    </div>
  </div>
  In Loop
{% endfor %}
Out of Loop
</div>
Out of Element
{% endblock %}

Hmm.

[insin]

Big pieces which are yet to be done:

Filters/functions
API for plugging in new tags/filters
Early generation and cloning of static chunks