ZPT-JS tutorial - Omiting and replacing

Omiting

Sometimes we want to omit the surrounding start and end tags but evaluating his contents. It can be done using data-omit-tag attribute. If we want to do this unconditionally:

sample.html
<html>
    <body>
        <div data-define="user 'John'" data-omit-tag="">
            <p>
                User: <span data-content="user">the user</span>
            </p>
            <p>
                Message: <span data-content="string: hello, ${user}!">hello, user!</span>
            </p>
        </div>
    </body>
</html>
                

The resulting HTML will be:

<html>
    <body>
        <p>
            User: <span data-content="user">John</span>
        </p>
        <p>
            Message: <span data-content="string: hello, ${user}!">hello, John!</span>
        </p>
    </body>
</html>
                

If we want to do this depending on a condition:

sample.html
<html>
    <body>
        <div data-define="user 'John'" data-omit-tag="omitDiv">
            <p>
                User: <span data-content="user">the user</span>
            </p>
            <p>
                Message: <span data-content="string: hello, ${user}!">hello, user!</span>
            </p>
        </div>
    </body>
</html>
                

The above example will omit the div tag if the variable omitDiv evaluates to true: rules to this are the same than conditional's

Replacing

The data-replace attribute is similar to data-content, but the first one removes the surrounding start and end tags:

sample.html
<html>
  <body>
    <p>
      This is <span data-replace="title">the title</span>
    </p>
  </body>
</html>
                

The resulting HTML will be:

<html>
  <body>
    <p>
      This is hello world!
    </p>
  </body>
</html>