Controller

The following properties are available within functions in the page controller:

tt

The topcoatTouch object.

data

Data used for rendering the page.

pageName

The name of the current page.

template

The template used to render the page. Unless you have overridden the initialize event, it will be a compiled underscore template.

The following functions are available from the controller

addData(key, value) - returns Controller

Adds data to the data property

It is chainable function...

tt.createController('home').
   addData('title', i18n.getTranslation('HOME', currentLanguage)).
   addData('message', i18n.getTranslation('WELCOME', currentLanguage));

addEvent(event, callback, selector) - returns Controller

Adds an event to the page

This is the preferred way to add events to pages in the MVC model. Events are automatically added when the page is shown and automatically removed when the page is hidden so it is the most efficient event delegator for Topcoat Touch.

tt.createController('home').
   addEvent('click', '#buttonHello', function() { console.log('button Hello click'); }).
   addEvent('click', '#buttonGoodbye', buttonGoodbyeClickHandler);

The following event or service hooks can be initiated in the constructor:

Note there are default behaviors only for render and initialize. There are also private _pagestart and _pageend events that should not be overriden, unless you want to stop page events from working.

render

Called when the page has to be rendered

Must return a jquery object or a string. The default behavior is to execute the template with the current data.

tt.createController('home', {title: 'Default Title', calc: 0},  { 
  // Use mustache rather than underscore templates to render....
  render: function() { return Mustache.render(this.template, this.data); }
});

initialize

Called when the controller is first initialized.

The default action is to load and compile templates/{PAGENAME}.ejs into this.template. Overload this to use Handlebars or Mustache as the template engine.

tt.createController('home', {},  { 
  initialize: function() { 
     $.get(templateDirectory + '/' + this.pageName + '.handlebars', function (source) {
        this.template = Handlebars.compile(source);  
     });
  }
});

pagestart

**called after the page is loaded ** think of this as a $(document).ready for pages.

pageend

called when the page is removed use this to free any objects or memory that are page specific.

prerender

called before the render call is made use this setup data just before page rendering

postrender($page)

called after the page is rendered but before it is added to the dom.

postadd

called after the page is added to the page, but before the page is visible.

postremove($page)

called after the page is removed from the dom