Ractive.js

Ractive.js was developed for The Guardian (UK) newspaper website, mainly for creating interactive Web pages.

Ractive.js practically combines various technologies and tricks so updating templated content does not require more code than the template itself.

This means writing an interactive app is much easier and will be available even to programmers with lesser JS coding experience.

The framework works with client-side (browsers) and server-side (Node.js) environments.

What is new in this release:

• Conditional attributes, e.g. <div {{#if selected}}class='selected'{{/if}}>...</div>
• Safe to specify touch events for browsers that do not support them
• Added support for {{else}} in {{#with}} block
• Added support for {{#each...}}...{{else}}...{{/each}} with empty objects (#1299)
• Within event handlers, the event object is available as this.event, and has a name property (useful alongside ractive.on('*',...)).
• Character position is include alongside line and column information when parsing with includeLinePositions: true
• Computed values and expressions are more efficient, and will not recompute unnecessarily

What is new in version 0.7.2:

• Conditional attributes, e.g. <div {{#if selected}}class='selected'{{/if}}>...</div>
• Safe to specify touch events for browsers that do not support them
• Added support for {{else}} in {{#with}} block
• Added support for {{#each...}}...{{else}}...{{/each}} with empty objects (#1299)
• Within event handlers, the event object is available as this.event, and has a name property (useful alongside ractive.on('*',...)).
• Character position is include alongside line and column information when parsing with includeLinePositions: true
• Computed values and expressions are more efficient, and will not recompute unnecessarily

What is new in version 0.3.7:

• Better handling of HTML entities
• Expressions with unresolved references will still render, using undefined in place of unknown references
• Hover event fires on the equivalent of mouseenter/mouseleave rather than mouseover/mouseout
• Various bugfixes and stability/performance improvements

What is new in version 0.3.6:

• Experimental 'magic mode' - use ES5 getters and setters instead of .set() and .get().
• More efficient event binding, and dynamic proxy event names.
• Support for pointer events with tap.
• Iterate through properties of an object.
• Bugfixes and refactoring.

What is new in version 0.3.5:

• Experimental support for components
• Support for component
• Option to use on-click style event binding (as opposed to proxy-click)

What is new in version 0.3.3:

• Maintenance and bug fixes.

Requirements:

• JavaScript enabled on client side
• Node.js for server-side environments