UNPKG

ractive-ractive

Version:
123 lines (79 loc) 3.16 kB
# 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](http://docs.ractivejs.org/latest/plugins)* [![Status](https://travis-ci.org/rstacruz/ractive-ractive.svg?branch=master)](https://travis-ci.org/rstacruz/ractive-ractive "See test builds") > ##### Note for v0.x users: > v1.0.0 changes the behavior of doing `require('ractive-ractive')` (eg, in Browserify). See [the changelog](HISTORY.md) for upgrade instructions. <br> ## Example ```js Ractive.defaults.adapt.push('Ractive'); parent = new Ractive(); user = new Ractive(); parent.set('user', user); ``` Changes in children are propagated to the parent: ```js user.set('name', 'Jake'); parent.get('user.name') //=> "Jake" ``` Changes in the parent are propagated to the children: ```js parent.set('user.name', 'Matt'); user.get('name') //=> "Matt" ``` <br> ## 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]) <br> ## 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: ```js 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 ``` <br> ## Usage ractive-ractive is available via npm. $ npm install --save ractive-ractive [![npm version](http://img.shields.io/npm/v/ractive-ractive.svg?style=flat)](https://npmjs.org/package/ractive-ractive "View this project on npm") In CommonJS: ```js Ractive.adaptors.Ractive = require('ractive-ractive'); Ractive.defaults.adapt = ['Ractive']; ``` Without module loaders, the adaptor is available as `"Ractive"` under `Ractive.adaptors.Ractive`. <br> ## Credits Hat tip to the original Ractive adaptor from [@Rich-Harris]. ([src](https://github.com/Rich-Harris/Ractive-plugins/blob/master/adaptors/Ractive.js)) <br> ## Thanks **ractive-ractive** © 2014+, Rico Sta. Cruz. Released under the [MIT] License.<br> Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]). > [ricostacruz.com](http://ricostacruz.com) &nbsp;&middot;&nbsp; > GitHub [@rstacruz](https://github.com/rstacruz) &nbsp;&middot;&nbsp; > Twitter [@rstacruz](https://twitter.com/rstacruz) [MIT]: http://mit-license.org/ [contributors]: http://github.com/rstacruz/ractive-ractive/contributors [ractive#1249]: https://github.com/ractivejs/ractive/issues/1249 [@Rich-Harris]: https://github.com/Rich-Harris