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>

Drawbacks to omitting and replacing

These attributes are useful, but the impossibility of updating is an important drawback.

Let's see and example of a template:

<html>
  <body>
    <p>
      This is <span data-content="title">the title</span>
    </p>
  </body>
</html>

The resulting HTML will be:

<html>
  <body>
    <p>
      This is <span data-content="title">hello world!</span>
    </p>
  </body>
</html>

If we want to update the title:

dictionary.message = "bye, world!";

The updated resulting HTML will be:

<html>
  <body>
    <p>
      This is <span data-content="title">bye world!</span>
    </p>
  </body>
</html>

Instead of using data-content let's use data-replace.

<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>

But the highlighted line has not got any ZPT custom attribute yet! So this HTML code can not be udated anymore. The same problem occurs with data-omit-tag.

In short, use these tags when no updating is needed. If you need updating avoid them, use data-content and other custom attributes.

ZPT-JS tutorial - Omiting and replacing

Omiting

Replacing

Drawbacks to omitting and replacing