Frontend Views and Templates

Views drive the visual part of the app, the UI. There are multiple types of views available through Marionette, including the ItemView, the CollectionView, the CompositeView, and the LayoutView.

To get more experience with this, let's add a new feature called "Modem" to Agent. For our Modem feature, we will use Marionette's ItemView to drive rendering our template.

Agent uses Handlebars as its templating engine. Handlebars, like most templating engines, is based on HTML and adds functionality on top of it. Here's an example of a Handlebars template:

<div class="{{ customClass }}"> Hello {{ name }}</div>

{{#if age}}
<p>You are {{ age }} years old</p>
{{/if}}

Remembering from our Introduction, variables are surrouned by curly brackets. Also, there's another Handlebars feature exampled, the helper {{#if <variable>}}. Helpers allow custom functionality to be run while the template is compiling. In this case, we're simply checking if age exists and if so, rendering a message that includes the age.

Helpers can add elements to the DOM, determine which element to render and many other things. We will use multiple custom helpers as we build out our Modem views.

New Model Form

The first step in adding our Modem feature is enabling the creation of one. In order to do this, a new Modem view and new Modem template need to be created. Let's tackle the template first:

Template

<div class="new-modem">
  <form id="new-modem-form">
    {{editFor "deviceName"}}
    {{selectFor "deviceType" listName="MODEM_TYPE"}}
    {{selectFor "hostname" listName="HOSTNAME"}}
    <button id="btn-save">Save</button>
  </form>
</div>

We've introduced two new helpers that are used quite often throughout Agent: editFor and selectFor. An editFor will create a label and input field for the given property. Other options can be overriden and are documented in the helper's file. The selectFor will create a label and dropdown menu for the given property. It takes an additional piece of information, listName. This is the name of the Clarify list (either Application or User-Defined) the dropdown is based off of. With a little bit of wiring up, Agent will query the backend for that list and automatically populate the dropdown with the correct values. As with the editFor helper, the selectFor has other options that can be overridden and are documented in its file.

View

Now that we have a template, let's create a View that will be responsible for rendering and handling interactions with it.

First, import the template file:

import newModelTpl from 'newModemTpl';

Next our view:

const NewModemView = Marionette.ItemView.extend({
  template: newModemTpl,

We need to associate an event (user clicking "Save" button) to an action:

  events: {
    'click .btn-save': 'handleSaveClick'
  },

  getData() {
    // Retrieve the data from the form here. Should return an object
    return { key: 'value' };
  },

  handleSaveClick(e) {
    e.preventDefault(); // Block browser from doing default action

    // Get the form data from the DOM
    const data = this.getData();

    // Submit the form via the view's model
    this.model.save(data, {
      success() {
        // Do something when we get response back from server
      },
    });
  },
});

Then create our standard controller and router and return the controller so that require.js has an object to inject into other modules:

  // Create basic controller that will render the view in 'show'
class CreateModemController {
  show(region) {
    const newModem = new NewModem();
    const newModemView = new NewModemView({ model: newModem });

    region.show(newModemView);

    return newModem;
  }
}

// Create a router to handle the new route
var ModemRouter = Marionette.AppRouter.extend({
  routes: {
    'modems/create': 'createModem'
  },

  initialize() {
  },

  createModem() {
    const createModem = new CreateModemController();

    const region = new Marionette.Region({ el: 'body' });

    createModem.show(region);
  },
});

// Instantiate the router to register the routes
new ModemRouter();

Behaviors

Marionette Behaviors are a method for adding in shared pieces of functionality that you want to add to a given view. It is simple to add in a behavior to your view and we've provided several behaviors to help. The list of behaviors is added right into your View when defining it. Each behavior may or may not take a variable being passed to it in the object that is paired with it in the behavior object.

const MyView = Marionette.ItemView.extend({
  behaviors: {
    Autofocus: { autofocus: '#status' },
    DropdownPopulation: {},
  },
});

Agent has many Behaviors that can be used in your views. You can see a list of them, along with comments on how to use them in source/Agent.Shared.Core/content/scripts/app/core/behaviors/

Next: Automation