Accessing data from template

This page summarizes all the concepts needed to access data from a template

Main

Mandarine's engine allows you to interact and make your templates access data located in your application's back-end. For this, your HTTP Handler decorated with @Render must return an object. This object will then be accessible from the template & it is meant to have the information you would like to interact with.

The @Model decorator

The @Model decorator provides a data modeler for your template in a programatic way. It is a HTTP Parameter Decorator, which means, it is used & injected in the parameters of an HTTP handler.

@Model working as your data modeler for your template makes your code easier to interact with & more readable. Although, it does not have any important functionality more than serving as a helper for your template's data.

When using ViewModel (object injected from @Model), your method instead of returning an object, must return this class as Mandarine will resolve the attributes added to the modeler at request time.

Syntax:

@Model()

Usage

Example

./src/main/resources/templates/my-template.html

<h2>Hello <%= data.name %> <%= data.lastname %></h2>
<small>Your current address is: <%= data.address.city %>, <%= data.address.state %>, <%= data.address.country %>. </small>

Controller

import { Controller, GET, Render, Model, ViewModel, MandarineCore } from "https://deno.land/x/mandarinets/mod.ts";

@Controller()
export class MyController {

    @GET('/path-template')
    @Render('my-template.html')
    public httpHandler(@Model() model: ViewModel) {
    
        model.setAttribute("data", {
            name: "Andres",
            lastname: "Pirela",
            address: {
                city: "New york",
                state: "NY",
                country: "United States"
            }
        });

        // returning ViewModel object.
        return model;
    }
    
    @GET('/manual-template')
    @Render(`<h2><%= name %></h2>`, { manual: true })
    public httpHandler2() {
        return {
            name: "Andres"
        };
    }
    
}

new MandarineCore().MVC().run();

Result

http://127.0.0.1:8080/path-template

http://127.0.0.1:8080/manual-template