Initialisation Options
edit this pageCreate a new Ractive instance using the specified options. For example:
ractive = new Ractive({
el: 'container',
template: '<p>{{greeting}}, {{recipient}}!</p>',
data: { greeting: 'Hello', recipient: 'world' }
});
Required
template
String
or (if preparsing)Array
orObject
The template to use. If this is a string, it must be valid (if meaningless, until rendered) HTML, otherwise this must be the output of Ractive.parse().
Alternatively, you can pass a string like
#myTemplate
- in this case, Ractive will use the contents of an element whose ID ismyTemplate
. See the 60 second setup for an example of this.
Optional
el
HTMLElement
orString
or jQuery-like collectionThe container element to render to, or a jQuery collection or string (see valid selectors).
data
Object
the data to initialise with
partials
Object
a
key: value
hash of partials that are specific to this instance, wherekey
is the name of the partial (as referenced within templates as{{>myPartial}}
), andvalue
is either a valid template string or the output of Ractive.parse(). See Partials for more infotransitions
Object
a hash of transition functions specific to this instance, referenced within templates using
intro
andoutro
attributes on elements. See Transitions for more infocomplete
Function
a function that will be called when render is complete (i.e. all intro transitions have finished. If there are no intro transitions, this function will be called as soon as the instance is created)
adaptors
Array
See Adaptors
modifyArrays
Boolean
Defaults to
true
. Whether or not to modify array mutator methods to enable frictionless data binding with lists (see array modification).magic
Boolean
Defaults to
false
. Whether or not to wrap data in ES5 accessors (see magic mode).twoway
Boolean
Defaults to
true
. Whether or not two-way data binding is enabled (see Two‐way binding).lazy
Boolean
Defaults to
false
. If two-way data binding is enabled, whether to only update data based on text inputs onchange
andblur
events, rather than any event (such as key events) that may result in new dataappend
Boolean
Defaults to
false
. Whether to append the Ractive toel
, or to overwrite the contents ofel
.debug
Boolean
Defaults to
false
. Whether to print console messages to help debug applications.preserveWhitespace
Boolean
Defaults to
false
. Whether or not to preserve whitespace in templates when parsing. (Whitespace in<pre>
elements is always preserved.)sanitize
Boolean
orObject
Defaults to
false
. Iftrue
, certain elements will be stripped from templates at parse time -<applet>
,<base>
,<basefont>
,<body>
,<frame>
,<frameset>
,<head>
,<html>
,<isindex>
,<link>
,<meta>
,<noframes>
,<noscript>
,<object>
,<param>
,<script>
,<style>
and<title>
- as will event attributes (e.g.onclick
). Alternatively, pass in an object with anelements
property containing an array of blacklisted elements, and an optionaleventAttributes
boolean (true
means 'disallow event attributes').