---
title: Ractive.js
category: JavaScript libraries
vim: ft=javascript
---
{% raw %}
### [Initialization](http://docs.ractivejs.org/latest/options)
new Ractive({
el: $('..'),
el: '#box',
template: '...', // required
// callbacks
init: function() {}, // on instanciate
complete: function() {}, // on finish animations
// objs
data: { ... },
partials: { ... }, // global: Ractive.partials
transitions: { ... }, // global: Ractive.transitions
components: { ... },
adaptors: [ ... ],
// options
magic: false
modifyArrays: true
twoway: true
noIntro: true // true = disable transition on initial render
lazy: false // false = use keyevents, true = use change/blur
append: false // false = overwrite element, true = append
debug: false
sanitize: false
})
## Instance methods
### Updating values
view.add('count', 1) //=> promise
view.subtract('count', 1) //=> promise
view.toggle('shown') //=> promise
view.set('a', true)
view.set({ a: true })
view.reset({ a: true })
view.merge('list', [a,b,c])
view.get('a')
view.data.a
### Nodes and components
view.find('.klass')
view.findAll('.klass')
view.nodes
view.nodes['hello'] // .find('#hello')
view.findComponent('photo')
view.findAllComponents('photo')
### Events
view.on('event', function() { ... })
view.off('event', fn)
view.fire('event')
### Others
view.update()
view.updateModel()
view.insert('.node .path')
view.observe({ 'name': function() { ... } })
view.toHTML() //=> String
view.render()
## Extend
View = Ractive.extend({
...
})
new View()
## [Components](https://github.com/RactiveJS/Ractive/wiki/Components)
See: https://github.com/RactiveJS/Ractive/issues/74
{:.center}
Widget = Ractive.extend({ ... })
ractive = new Ractive({
el: 'main',
template: '