Temple Events

Adds DOM event actions to Temple's Mustache view.

Install

Download the latest version dist/ folder and use via a script tag. The variable Events will be attached to Temple.

<script type="text/javascript" src="temple.js"></script>
<script type="text/javascript" src="temple.events.js"></script>

If using Browserify or Node.js, you can install via NPM and use via require("temple-events").

$ npm install temple-events

Usage

Add to an instance of a Mustache view (Temple.Mustache) with view.use(Temple.Events). This will set up decorators that look for element attributes in the form of on-[event]. The attribute value will be parsed for action names to be fired on the view. The first argument passed will be an Action object. It's also possible to pass along other values to actions. These will be added as arguments to the triggered action.

<a href="#" on-click="myEvent, 'Hello', {{ noun }}">Click Me</a>

// a new mustache template
new Temple.Mustache(template, { noun: "World" })
 
// init the plugin
.use(Temple.Events)
 
.addAction("myEvent", function(action, str, noun) {
    action.original.preventDefault();
    alert(str + " " + noun); // "Hello World"
});

Action objects have the following properties:

• bubbles: A boolean indicating if the action should continue bubbling through remaining actions, including parent components.
• stopPropagation(): A method that sets bubbles to false.
• original: The original, native DOM event
• node: The element the action is attached too
• context: The mustache context (Temple.Mustache.Context) the element node exists within. Sometimes the original view, sometimes not.