Changelog
0.8.0
2016-08-30
Breaking changes
\{{#each filter(someList)}}<input value="\{{.prop}}" />\{{/each}}
because changes to the computed child (filter(someList).0.prop
aren't kept in sync with their source (someList.?.prop
) as Ractive doesn't know how to reverse the expression. There is an ongoing discussion about how to address this, including an open PR that would put this behavior behind a flag and attempt to keep the sources up to date as the computation children changed./
s. They can also now handle relative contexts because partial name expressions no longer support spaces around the .
delimiters in object paths. \{{> foo.bar.baz .bat}}
before this change would have parsed as a single expression to get the partial name from foo.bar.baz.bat
. It will now get the name from foo.bar.baz
and have a context provided from .bat
.<option>
elements.\{{this.0}}
._ractive
tracking data added to Ractive controlled DOM nodes has changed significantly. The format of Ractive.getNodeInfo
objects is still compatible.\{{#with obj}}
will no longer render if obj
is falsey (https://github.com/ractivejs/ractive/issues/1856)modifyArrays
now defaults to false
. If you modify arrays using splice operations directly, you will need to notify Ractive to sync with the changes afterwards.Deprecated features
keypath
, key
, index
properties are deprecated.intro
, outro
, and intro-outro
directives have been deprecated and replaced by named and suffixed directives ${name}[-in][-out]
e.g. fade-in-out
. Arguments passed to these directives should no longer be wrapped in mustaches, as they are parsed as an array. Dynamism for transitions can be achieved with attribute sections.decorator
directive has similarly deprecated and replaced by prefixed and named directives as-${decorator}
e.g. as-ace-editor
. Arguments passed to these directives should also no longer be wrapped in mustaches, as they are also parsed as an array. Multiple decorators are now supported by simply including multiple directives e.g. as-registered="'some-id'" as-validated="{ maxLen: 10, match: /^foo/ }"
.\{{#with some.expression()}}<button on-click="@this.set(@keypath + '.foo', 42)">set .foo to 42</button>\{{/with}}
would become \{{#with some.expression()}}<button on-click="event.set('.foo', 42)">set .foo to 42</button>\{{/with}}
.New features
...arguments
) and arguments
access is now available for method event handlers. Individual arguments are available using array notation (arguments[n]
), dot notation (arguments.0
), or 1
-based dollar vars, like regular expression matches ($1
, $2
, etc).'foo.bar.bazzes.0'
can be linked to 'baz'
so that the detail section doesn't have to worry about a non-bindable expressions or copying objects around. Both sides of the link are automatically kept in sync. See {{{createLink 'ractive.link()'}}}.{ foo }
is equivalent to { foo: foo }
..
s in them, you can now escape them with a \
. So if you have a bar
object with a foo.baz
property, it can be accessed with bar.foo\.baz
. Keypaths in the template are given as escaped paths so that they can be used directly with Ractive methods. There are also a few new static methods on Ractive
to deal with escaping, unescaping, splitting, and joining keypaths.<textarea>
s now handle HTML content as plain text to match what happens in browsers. They can now also set up two-way binding with a single interpolator as content instead of using the value attribute e.g. <textarea>\{{someBinding}}</textarea>
is equivalent to <textarea value="\{{someBinding}}"></textarea>
.enhance: true
when creating your Ractive instance, it will not discard the contents of its target element and will instead try to reuse elements and nodes as it builds the virtual DOM from its template. This option is incompatible with the append
option.Object
, String
, and Boolean
globals are now accessible from within templates.\{{#with someExpressionOrRef as alias1, some.deeply.nested[reference].expression as alias2}}...\{{/with}}
to set up as many aliases as you need. For iterative sections, you can alias the context with the iteration (the current item) by using \{{#each some.list as item}}...\{{/each}}
. Partial contexts also support aliasing, since partial context is just a shortcut for \{{#with context}}\{{>partial}}\{{/with}}
, as \{{>somePartial some.path as alias1, some.other[expression](arg1, arg2) as alias2}}
.function
s on the template root. At render-time, any expressions look for a corresponding pre-built function before using new Function(...)
to create one. Templates parsed in this way are no longer JSON compatible. To enable this mode, pass csp: true
when pre-parsing your template.@this
will resolve to the nearest Ractive instance in the template, which includes components should the template belong to one. @global
resolves to window
in most browsers and global
in Node.js. Both special references are also available outside of the template so that Ractive can be notified of changes outside the template easily.new
, if
, while
, etc as references.@rootpath
.<script>
tags can now contain top-level inline partial definitions that will get added to the instance along with the scripte-defined partial.toCSS
method. You can also get the CSS for all instances with a new static Ractive method of the same name.ractive.transition( transition, node, options )
, and node
can be supplied implicitly from an event handler. Transitions can now return a Promise and complete
will automatically be called when the promise resolves.style-left="\{{x}}px"
and class-someClass="\{{someCondition || someOtherCondition}}"
. For the special style form, additional hyphens in the attribute are turned into camel case. For the special class form, the truthiness of the value determines whether or not the class is added to the list.set
will create intermediate objects when setting an undefined keypath, array methods will now swap in an empty array instead of erroring when called with an undefined keypath. Trying to use an array method with a non-array value including null
will still throw.resolve
and get
methods.elseif
and else
blocks no longer include previous blocks' conditions in their own, so expensive computations are no longer repeated and conditions for elseif
are no longer forced to be an expression. Instead, subordinate blocks connect with their siblings when they render and only show if all prior siblings have falsey conditions.merge
can now be called with the same array that exists at the given keypath, and the differences will be computed from the model's cached array members. This allows extensive in-place modification of an array to be handled as a series of splice operations but in a single operation. Note that merge
may be moved to a set
option at some pooint in the future.Bug fixes and other changes - way too many to list
Changelog
0.7.3
2015-04-25
<script>
tags in IE8 (#1908)css
property can be created in node.js (#1927)lazy: true
option (#1933)Changelog
0.7.2
2015-04-02
ractive.runtime.js
works again (sorry everyone!) (#1860)intro-outro
on a component triggers the same warning as intro
or outro
by themselves (#1866)Array.prototype.map
polyfill in old versions of Prototype.js (#1872)Changelog
0.7.0
2015-03-17
Breaking changes
ractive.data
is no longer exposed. Use ractive.get()
and ractive.set()
rather than accessing data
directlydata
properties on the instance/child component always override parent dataDeprecated features
ractive.debug
is replaced with a global Ractive.DEBUG
flag (see below)<!-- {{>myPartial}} -->...
) should be replaced with inline partial sections (see below)options.data
should, if supplied, be a plain old JavaScript object (non-POJOs) or a function that returns one. Non-POJOs and arrays should only exist as properties of options.data
New properties
ractive.parent
- reference to parent componentractive.container
- reference to container component (e.g. in <x><y/></x>
, x === y.container
)ractive.root
- reference to a component's top level parent (i.e. created with new Ractive()
)New methods
ractive.findParent(name)
- finds the nearest parent component matching name
ractive.findContainer(name)
- finds the nearest container component matching name
ractive.resetPartial('name', template)
- updates all instances of {{>name}}
ractive.toHtml()
is an alias for ractive.toHTML()
ractive.once()
and ractive.observeOnce()
are self-cancelling versions of ractive.on()
and ractive.observe()
Ractive.getNodeInfo(node)
returns information about node
's owner and the context in which it livesOther features
Ractive.DEBUG
flag controls whether warnings for non-fatal errors are printed to the consoleconsole
can be accessed inside template expressions (e.g. {{console.log(this)}}
), for debuggingelseif
in templates: {{#if something}}...{{elseif otherthing}}...{{/if}}
twoway
directive for granular control over two-way bindinglazy
directive, e.g. lazy=true
or lazy=250
to prevent or throttle data updates from user input{{#partial myPartial}}...{{/partial}}
). As well as defining partials within a template, they are used with named yields inside components (see next). Partial definitions must exist at the top level of a template, or as an immediate child of an element/componentractive.set()
can be used to set multiple 'wildcard' keypaths simultaneouslyractive.toggle(wildcardKeypath)
toggles all keypaths matching wildcardKeypath
individually. Ditto ractive.add()
and ractive.subtract()
Bug fixes - too many to list...
Changelog
0.6.1
2014-10-25
obj
has no keys, then the else
half of {{#each obj}}...{{else}}...{{/each}}
will renderthis.event
available in method callsdebug
is true@keypath
reference resolves to the current context@index
, @key
and @keypath
references are resolved at render time, not parse time (fixes #1303)console
is a supported global in expression - e.g. {{console.log('debugging',foo)}}
Changelog
0.6.0
2014-09-29
new Ractive()
now inherits all options as methods/properties including event hooks.init()
function (see below) is mapped to onrender()
and will fire more than once, and no longer contains options argumentractive.merge()
and ractive.shift()
etc, work across component boundariesbeforeInit()
, init()
, and complete()
- replaced with onconstruct()
, onrender()
and oncomplete()
methodsonconstruct()
, onconfig()
, oninit()
, onrender()
, oncomplete()
, onunrender()
, onteardown()
. These all have equivalent events, e.g. this.on('render',...)
, which are reserved (i.e. you cannot use them as proxy events in templates)<div {{#if selected}}class='selected'{{/if}}>...</div>
{{else}}
in {{#with}}
block{{#each...}}...{{else}}...{{/each}}
with empty objects (#1299)event
object is available __/25/2020as this.event
, and has a name
property (useful alongside ractive.on('*',...)
).includeLinePositions: true
Changelog
0.5.8
2014-09-18