Rendering HTML

 Top  Previous  Next

The 'render' property

 

The 'render' property defines the HTML view for the host screen. This property supports two different sets of values, which is determined by the framework used to render the view:

 

•If you declare view, HostSurfer will render the HTML on the specified container using handlebars.js.
•If you declare route, the HTML will be rendered by an external framework like Angular, React, Vue.js, etc.

 

By using HTML with Handlebars templates and some Javascript code, you can build a complete HostSurfer application. However, HostSurfer is flexible enough to allow you to use any modern Javascript framework if it is familiar to you or when, for example, you need integration between the HostSurfer application and some other web solution developed with any of these libraries, as part of a more complex web ecosystem.

 

The attributes for the view are:

 

Property name

Explanation

id

The id of the HTML element container where the HTML template will be rendered. Defaults to the view id passed in the HostSurfer constructor. If not specified, the default is 'hs-view'.

template

The file or code containing the handlebars template. This page will be processed by HostSurfer and inserted into the declared HTML container.

oncomplete

A Javascript function callback to be executed when the rendering process has been completed. This property is optional.

 

The following example how to specify a 'view' :

 

    render: {

        view: {

            id: 'hs-view',

            template: 'login.html',

            oncomplete: function () {

                // some Javascript code;

            }

        }

    }

 

 

If you work with Angular framework, you may want to use its intrinsic router and template system to render the final HTML view. In this you need to declare a route like this:

 

    render: {

        route: {

            url: '#!login'

        }

    }

 

So, this is the structure for route:

 

Property name

Explanation

url

String or function that returns the url 'route' to be processed by the selected Javascript framework.