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 will render the actual content on the page. The view below will display data passed to it from the controller.

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

  ({
    className: 'tcenter',
    loadData: function (options) {
        //populate your data
        myData=new Object();
        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.