Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Templated is a MooTools mixin class which creates elements for classes using a string-based HTML template which may included embedded attach points and events.

branch: master

Fixing headers

latest commit 8590d6f8f1
David Walsh authored September 19, 2011
Octocat-spinner-32 Demos Removing YUI compressed file. Adding external template file. September 16, 2011
Octocat-spinner-32 Docs Docs updates September 16, 2011
Octocat-spinner-32 Source Fixing headers September 19, 2011
Octocat-spinner-32 README.md Adding screenshot September 16, 2011
Octocat-spinner-32 package.yml Fixing headers September 19, 2011
README.md

Templated

Templated is a MooTools mixin class which creates elements for classes using a string-based HTML template which may included embedded attach points and events. Using Templated allows developers to provide the UI component structure to the class, taking the presentation structure out of the Class creator's class and placing it into the end developer's.

How to Use

Templated should be provided in the Implements array for the given class:

#JS
var UIWidget = new Class({

    Implements: [Options, Templated]

    // more....

});

With Templated implemented, provide the HTML string template for the widget, including attach points, attach events, and props:

#JS
var UIWidget = new Class({

    Implements: [Options, Templated]

    // The UI template with attachpoints and attachevents
    options: {
        template: "<div class='UIWidget'>" + 
                    "<p>{message}</p>" +
                    "<input type='text' data-widget-attach-point='inputNode' data-widget-attach-event='keyup:onKeyUp,focus:onFocus' />" + 
                    "<div type='submit' data-widget-type='UIWidgetButton' data-widget-attach-point='buttonWidget,submitWidget' data-widget-attach-event='click:onSubmit' data-widget-props='label:\"My Prop Label\",somethingElse:true'></div>" + 
                  "</div>",
        uiwidgetOption: "here!"
    },

    // more...

});

Attach points add element references to the class instance. Attach events provide shorthand methods to map events to methods on the class instance. Subwidgets may be embedded via the data-widget-type attribute. If subwidgets are included, properties for the widget may be attached to the data-widget-props attribute.

When the template should be parsed (usually after options have been merged via setOptions), call the this.parse() method:

#JS
var UIWidget = new Class({

    Implements: [Options, Templated]

    // The UI template with attachpoints and attachevents
    options: {
        template: "<div class='UIWidget'>" + 
                    "<p>{message}</p>" +
                    "<input type='text' data-widget-attach-point='inputNode' data-widget-attach-event='keyup:onKeyUp,focus:onFocus' />" + 
                    "<div type='submit' data-widget-type='UIWidgetButton' data-widget-attach-point='buttonWidget,submitWidget' data-widget-attach-event='click:onSubmit' data-widget-props='label:\"My Prop Label\",somethingElse:true'></div>" + 
                  "</div>",
        uiwidgetOption: "here!"
    },

    // Constructor
    initialize: function(options) {
        this.setOptions(options);

        // Parse the template, create nodes, find attach points and events
        this.parse();
    }

});

Once the template is parsed, attach points are available on the instance's object!

Helpful Methods

Templated provides stub methods along the way so code can be executed at different points within the creation of the widget:

  • postMixInProperties: Fires after the options and widget properties have been mixed.
  • postCreate: Fires after the widget nodes have been create but before the nodes are placed into the DOM
  • startup: Fires after the widget has been created and is placed into the DOM

These methods have proven to be useful within the Dojo Toolkit.

Screenshot

Something went wrong with that request. Please try again.