Verint | Telligent Community
Verint | Telligent Community
  • Site
  • User
  • Site
  • Search
  • User
Verint Community 12.x
  • Verint Community
Verint Community 12.x
API Documentation template JavaScript API Module
  • User Documentation
  • Ask the Community
  • API Documentation
  • Manager Training
  • Developer Training
  • Tags
  • More
  • Cancel
  • New
  • API Documentation
  • +In-Process API Documentation
  • +Plugin API Documentation
  • +REST API Documentation
  • -Widget, Theme, and Automation APIs
    • +Automation Events
    • -Client-side APIs
      • +Client Messages
      • +Composer Plugins
      • -JavaScript API Modules
        • administrationToolbar JavaScript API Module
        • authentication JavaScript API Module
        • cookie JavaScript API Module
        • editableGroup JavaScript API Module
        • javaScript JavaScript API Module
        • language JavaScript API Module
        • media JavaScript API Module
        • messaging JavaScript API Module
        • navigationConfirmation JavaScript API Module
        • notifications JavaScript API Module
        • preview JavaScript API Module
        • regex JavaScript API Module
        • rest JavaScript API Module
        • shortcuts JavaScript API Module
        • systemNotifications JavaScript API Module
        • template JavaScript API Module
        • tourTips JavaScript API Module
        • ui JavaScript API Module
        • url JavaScript API Module
        • utilities JavaScript API Module
      • +jQuery Events
      • +jQuery Plugins
      • +UI Components
    • +Dynamic Configuration
    • +LESS Functions
    • +Script API Types
    • +Script APIs

template JavaScript API Module


jQuery.telligent.evolution.template

The template module provides a simple client-side templating. This is useful when building UI from REST responses or other cases when it's impractical to render UI in the widget on the server side.

Usage

Defining a template

Client templates can be defined either as plain JavaScript strings or embedded in HTML rendered by a widget. When rendering in HTML, the template should be defined in a script block of type text/html.

<script type="text/html" id="hello">
    <p>Hello, <%: name %>.</p>
</script>

Delimiters in the template support rendering (and optionally encoding) variables as well as embedding JavaScript logic.

The delimiter format <%= value %> renders a variable without encoding:

<p>This variable will be rendered directly without encoding <%= variableName %></p>

The delimiter format <%: value %> renders a variable after HTML-encoding it:

<p>This variable will be rendered with HTML encoding <%: variableName %></p>

The delimiter format <% %> renders nothing but allows embedding of raw JavaScript logic.

<div>
    <% if (answered) { %>
        <span class="answered">Answered</span>
    <% } else { %>
        <span class="not-answered">Not Answered</span>
    <% } %>
</div>

Looping can be performed with the template helper, foreach

<ul>
    <% foreach(users, function(user){ %>
        <li>
            <a href="<%: user.profileUrl %>">
                <%= user.displayName %>
            </a>
        </li>
    <% }); %>
</ul>

Using the template

To use a template, it must first be compiled. This transforms it from a string into an efficient function which can be passed data to template, returning a rendered string.

// given a <script type="text/html" id="hello-world"> ... </script>
var helloWorldTemplate = $.telligent.evolution.template.compile('hello-world');

// alternatively, a raw template string can be passed to compile
var helloWorldTemplate = $.telligent.evolution.template.compile('<p>Hello <%: name %></p>');

The compiled template can then be efficiently used (and re-used) by passing data to template. The data must contain keys that match those contained in the template. In this case, the template can refer to a variable named 'name'.

var renderedHello = helloWorldTemplate({
    name: 'Rob'
});

Arrays can be passed as well. In this case, a template's foreach could iterate over 'users'.

var renderedUserList = user({
    users: [
        { displayName: 'Name1', profileUrl: 'url1' },
        { displayName: 'Name2', profileUrl: 'url3' },
        { displayName: 'Name3', profileUrl: 'url3' }
    ]
});

Customizing template syntax

foreach is a platform-defined template helper. Custom helpers can also be defined by passing an object of functions during compilation.

var myTemplate = $.telligent.evolution.template.compile('myTemplate', {
    pluralize: function(raw) {
        // naive pluralization demonstration
        return raw + 's';
    }
});

Then the helper can be used within the template

<script type="text/html" id="myTemplate">
    <ul>
        <% foreach(vehicles, function(vehicle) { %>
            <li>type: <%= pluralize(vehicle.type) %><%>
        <% }); %>
    </ul>
</script>

Methods

compile

Transforms a template string into an efficient JavaScript function which can process data into a rendered string.

$.telligent.evolution.template.compile(template, extraHelpers, delimiters)
  • template: Either a raw JavaScript template string, or an ID of a <script type="text/html"> element containing an embedded template.
  • extraHelpers: Optional functions made available for use within the template
  • delimiters: Optional object containing overrides for re-defining what delimiter formats are used. Override object must contain both open and close delimiter keys and values.
    • default:
      • open: '<%'
      • close: '%>'

  • Share
  • History
  • More
  • Cancel
Related
Recommended
  • Telligent
  • Professional Services
  • Submit a Support Ticket
  • Become a Partner
  • Request a Demo
  • Contact Us

About
Privacy Policy
Terms of use
Copyright 2024 Verint, Inc.
Powered by Verint Community