Skip to content

Layout Documentation

Jump to bottom
Jason Graves edited this page Jul 8, 2016 · 1 revision

##Layouts

Layouts are supported by Zenhance and are simple to implement. To create a layout add a template file to the /application/layout/scripts directory or subdirectory therein. Next, in the application.json file add the layout path name relative to the /application/layout/scripts directory to the template.layout section. The following is an example layout file.

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
        {{content}}
    </body>
</html>

The {{content}} parameter gets automatically assigned to by the template rendering engine.

Layout API

The layout object is available to the controller in the form of this.layout. To change the layout name dynamically, make use of the setLayout( layoutName ) method. All other information added to the layout object will be made available to the layout itself, for example.

// /application/controllers/IndexController.js
'use strict';

class IndexController {

    indexAction(){
        this.layout.setLayout('tablet');
        this.layout.myVariable = 'myValue';
    }

 }

In the above example, the layout is given a new variable called myVariable which will then be accessible within the layout as {{myVariable}}.

setLayout( layoutName )

Changes the current layout to the specified layoutName. The layoutName parameter can be a relative path to the template name for example setLayout('devices/phone'), specifies to use the phone layout located in the devices subdirectory, the full path of which would be /application/layouts/devices/phone.handlebars.

Clone this wiki locally