dt-dom

Δt dom adapter - async & dynamic templating engine

Usage no npm install needed!

<script type="module">
  import dtDom from 'https://cdn.skypack.dev/dt-dom';
</script>

README

Δt jQuery Adapter

This is an jQuery Adapter for Δt.

It listen on the template events and writes to the DOM.

Check out the demo!

Installation

$ npm install dt-jquery

How this Adapter works:

<script src="dt-jquery.browser.js"></script>
<scipt>
    var jqueryify = window.dynamictemplate.jqueryify; // get the jquery adapter
</script>

Just throw your template in and add it to the DOM when it's ready:

var tpl = jquerify(template(mydata));
tpl.ready(function () {
    $('.container').append(tpl.jquery);
});

Documentation

jqueryify(tpl)

tpl = jqueryify(new dynamictemplate.Template)

Expects a fresh Δt template instance (fresh means, instantiated in the same tick to prevent event loss).

It just simply listen for a bunch of events to use jQuery for DOM manipulation.

Uses requestAnimationFrame for heavy DOM manipulation like node insertion and node deletion.


Overrides the query method of the async XML Builder.

For query type text it returns the result of jQuery.text.

For query type attr it returns the result of jQuery.attr.

For query type tag it returns a dummy object that it will receive again on an add event.