Experimental Ractive.js adaptor for Ractive objects
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
vendor/ractive
.gitignore
.istanbul.yml
.npmignore
.travis.yml
HISTORY.md
LICENSE
README.md
index.js
package.json

README.md

ractive-ractive

Experimental ractive adaptor for ractive objects. This makes it possible to use template-less Ractive objects as models.

Find more Ractive.js plugins at docs.ractivejs.org/latest/plugins

Status

Note for v0.x users:

v1.0.0 changes the behavior of doing require('ractive-ractive') (eg, in Browserify). See the changelog for upgrade instructions.


Example

Ractive.defaults.adapt.push('Ractive');

parent = new Ractive();
user   = new Ractive();

parent.set('user', user);

Changes in children are propagated to the parent:

user.set('name', 'Jake');
parent.get('user.name')   //=> "Jake"

Changes in the parent are propagated to the children:

parent.set('user.name', 'Matt');
user.get('name')   //=> "Matt"

Features

Everything you'd expect to work will work.

  • bi-directional propagation
  • observers
  • templates
  • computed properties

However, these things are not supported, but may be in the future:

  • circular dependencies (an error will be thrown)
  • events (see ractive#1249)

Wrap events

It will trigger a few events:

  • wrap - called when the instance is set as an attribute of another instance
  • unwrap - called when the instance has been unset from its parent
  • wrapchild - called when the instance gets an Ractive attribute set
  • unwrapchild - called when the instance gets an Ractive attribute unset

To illustrate:

parent = new Ractive();
child  = new Ractive();

parent.set('x', child);
// triggers `wrap(parent, 'x')` on child
// triggers `wrapchild(child, 'x')` on parent

parent.set('x', undefined);
// triggers `unwrap(parent, 'x')` on child
// triggers `unwrapchild(child, 'x')` on parent

Usage

ractive-ractive is available via npm.

$ npm install --save ractive-ractive

In CommonJS:

Ractive.adaptors.Ractive = require('ractive-ractive');
Ractive.defaults.adapt = ['Ractive'];

Without module loaders, the adaptor is available as "Ractive" under Ractive.adaptors.Ractive.

Browser compatibilty: available anywhere Ractive is. (Test suite)

npm version  


Credits

Hat tip to the original Ractive adaptor from @Rich-Harris. (src)

Thanks

ractive-ractive © 2014+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz