Passing Data to Templates

Overview

This page explains how to create a custom view component that passes data to the Handlebars template.

Steps to Complete

The view component is responsible for rendering the actual content on the page. The example below demonstrates how the view displays data passed from the controller.

Note: Any JavaScript object assigned to this before the render() method is called will be accessible within the Handlebars template.

./custom/clients/base/views/my-dataview/my-dataview.js

    ({
    className: 'w-full h-full',
    loadData: function (options) {
        //populate your data
        myData = {};
        myData.myProperty = "My Value";
        this.myData = myData;

        /*
            //alternatively, you can pass in a JSON array to populate your data
            myData = $.parseJSON( '{"myData":{"myProperty":"My Value"}}' );
            _.extend(this, myData);
        */

        this.render();

        //reset flags on reload
        if (options && _.isFunction(options.complete)) {
            options.complete();
        }

        // Another Alternative you can get the date from an end point
        let self = this;
        app.api.call("read", app.api.buildURL("Accounts/4bbd3b4e-755d-11e9-9a7b-f45c89a8598f"), null, {
            success: function (accountResponse) {
                self.myData['account'] = accountResponse;
                self.render();
            },
        })

    },
})

Next, add the Handlebars template to render the data. An example is shown below:

./custom/clients/base/views/my-dataview/my-dataview.hbs

  {{#with myData}}
 {{account.name}} - {{account.assigned_user_name}} <br>
 {{myProperty}}
{{/with}}

Once the files are in place, add the view to a layout and then navigate to Admin > Repair > Quick Repair and Rebuild.