TPL + VUE

Kooboo is developed based on the Template Attribute Language and VueJS. Kooboo is a backend SSR engine, and what is sent to the browser is the final generated HTML code.

References:

https://en.wikipedia.org/wiki/Template_Attribute_Language

https://vuejs.org/api/built-in-directives.html

Kooboo has implemented most of the syntax of TPL, as well as the syntax of VueJS that can be run on the backend. It also provides intelligent suggestions.

Here is a simple example:

<script env="server">
    var data = [];
    data.push({FirstName:"Joe", LastName:"Smith"});
    data.push({FirstName:"Van Golf", LastName:"Vincent"}); 
</script>

<div k-for="item in data" repeat-self="true">
    <span k-content="item.FirstName"> first name</span>
    <span k-content="item.LastName"> LastName name</span>
</div>

k- , v- , env=server

The syntax with the "k-" prefix can only be executed on the backend. The syntax with the "v-" prefix and the related {{}} binding syntax can be executed on both the frontend and the backend. However, since it cannot be determined whether the user wants to run it on the frontend or the backend, the user needs to manually specify the environment as "env=server" or "env=client". The default value is "client".

The example syntax provided previously is equivalent to the following:

<script env="server">
    var data = [];
    data.push({FirstName:"Joe", LastName:"Smith"});
    data.push({FirstName:"Van Golf", LastName:"Vincent"}); 
</script>

<div env="server" v-for="item in data" repeat-self="true">
    <span v-text="item.FirstName"> first name</span>
    <span v-text="item.LastName"> LastName name</span>
</div>

Result

<div>
    <span>Joe</span>
    <span>Smith</span>
</div><div>
    <span>Van Golf</span>
    <span>Vincent</span>
</div>