Portals

The <v-portal> tag allows us to render part of the page seperately of it's surroundings. When the page is rendered the content is rendered normally.

Portals are useful when we want to use AJAX to re-render just part of the page. VTML works out where all the variables came from so they can appear almost anywhere.

<v-sql target=$dogs >
    select * from dogs
</v-sql>

<form v-name="create_dog" >
    <input name="new_name" required />
    <v-action>
        <v-sql>insert into dogs (name) values ($.body.new_name)</v-sql>
    </v-action>
</form>

<p>There are $dogs.length doggos</p>

<v-portal path="/dogs/view" >
    <v-for-each>
        <div>
            <p>$dog.name</p>
        </div>
    </v-for-each>
</v-portal>

We can now send a GET request to /dogs/view and get only the list of dogs.

It's worth noting that portals cannot be used inside loops like <v-for-each> as VTML cannot work out which itteration needs to be rendered.