ractive

Ractive.js - Next-generation DOM manipulation

Got questions? Tag Stack Overflow questions with ractivejs or contact @RactiveJS on Twitter

What is Ractive.js?

It's a JavaScript library for building reactive user interfaces in a way that doesn't force you into a particular framework's way of thinking. Its features include...

• data-binding, with a beautiful declarative syntax
• event handling that doesn't make you tear your hair out
• flexible and performant animations and transitions

...among many others. It takes a radically different approach to DOM manipulation - one that saves both you and the browser unnecessary work.

To get a feel for how it will make your life as a web developer easier, visit ractivejs.org, follow the interactive tutorials, or try the 60 second setup.

Get help

If you don't find what you're looking for in the docs, ask a question on Stack Overflow with the ractive tag, or send a tweet to @RactiveJS or @Rich_Harris.

Building

To build the project locally, you'll need to have Grunt installed. Clone the repo, navigate to the folder, then do

$ npm install

to install all the development dependencies (which aren't included in the repo itself). Then do

$ grunt

to build the project from source, lint it, run the tests and minify the library. If all of those steps succeed, files will be created in the build folder.

Other grunt commands available:

# Watch all source files, and rebuild when they change. This will
# only concatenate the files (it won't lint/test/minify) to the
# tmp folder
$ grunt watch

# Concatenate the files to the tmp folder
$ grunt concat

# Lint the concatenated code
$ grunt jshint

# Run tests on the concatenated code
$ grunt qunit

# Release a new version of the library to the release folder
# (reads version number from package.json)
$ grunt release

Contributing

If you have feature suggestions or bug reports, please raise an issue on GitHub after checking it's not a duplicate.

Pull requests are always welcome! In lieu of a formal styleguide, please try to follow the existing conventions.

Browser support

Tested successfully in IE8+ and all modern browsers. If your experience differs please let me know! (For legacy browser support, use the builds with legacy in the filename - these include polyfills for Array.prototype.forEach and other ES5 features used by Ractive.)

License

Copyright (c) 2012-13 Rich Harris. Released under an MIT license.

Changelog

0.3.7

2013-10-06

• Adaptors - use external libraries like Backbone seamlessly with Ractive
• Dependency tracking within functions, by monitoring ractive.get())
• Create live nodelists with the findAll() method
• Observers are guaranteed to fire before DOM updates, unless {defer:true} is passed as an option to ractive.observe()
• Triples behave correctly inside table elements etc (issue #167)
• Delimiters ('{{' and '}}') can be overridden globally with Ractive.delimiters and Ractive.tripleDelimiters
• Fix #130 (event handler parameters and array modification)
• Tap event respects spacebar keypresses while a suitable element is focused
• updateModel() method to resync two-way bindings if they are manipulated external (e.g. $(input).val(newValue))
• 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