ZPT-JS tutorial - Using ZPT's original tags

A ZPT template is a not well formed HTML document. This is not important because ZPT is on server side. The generated HTML documents do not include ZPT tags, so they are well formed HTML documents.

However, this does not work this way using ZPT-JS. ZPT-JS is on client side: the template and the generated HTML document are the same file, so ZPT tags break HTML and make HTML documents not well formed.

The default configuration of ZPT-JS use the standard way of extend HTML: the data-* attributes. So tal:content (a ZPT attribute) is replaced by data-content. The complete list of ZPT-JS attributes is at reference page.

If you prefer to use the original ZPT's attributes invoke zpt.context.useOriginalTags() method before run method:

original-tags-sample.js
"use strict";

var zpt = require( 'zpt' );

var dictionary = { 
    user: {
        name: "Bob", 
        age: function( ){
            return 25;
        }
    }
};

// Don't forget to declare to use original tags!
zpt.context.useOriginalTags();

zpt.run({
    root: document.body,
    dictionary: dictionary
});
                
original-tags-sample.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Some ZPT-JS examples</title>

        <script src="original-tags-sample.js" defer></script>
    </head>
    <body>
        <h1>Some expressions</h1>
        <ol>
            <li tal:content="user/name">the name</li>
        </ol>
    </body>
</html>