ractive-adaptors-backbone

Use Backbone models and collections in your Ractive components.
View demo ›

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

Installation

Include ractive-adaptors-backbone.min.js on your page below Ractive, e.g:

<script src='lib/ractive.min.js'></script>
<script src='lib/ractive-adaptors-backbone.min.js'></script>

To get ractive-adaptors-backbone you can:

Use CDN

https://cdn.jsdelivr.net/npm/[email protected]/dist/ractive-adaptors-backbone.min.js

Use bower

$ bower i ractive-adaptors-backbone

Use npm

$ npm install --save ractive-adaptors-backbone

Download

• Download the latest release.

Usage

If you're using <script> tags to manage your dependencies, everything is already set up, and you can use the adaptor like so:

var user = new Backbone.Model({
  name: 'world'
});

var ractive = new Ractive({
  el: 'main',
  template: '<h1>Hello {{user.name}}!</h1>',
  data: {
    user: user
  }
});

// If you interact with the model, the view will change
user.set( 'name', 'everybody' );

If Backbone isn't a global variable (e.g. you're using Browserify or RequireJS), you need to register it:

// Example with CommonJS modules - it also works with AMD
var Backbone = require( 'backbone' );
var Ractive = require( 'ractive' );
var backboneAdaptor = require( 'ractive-adaptors-backbone' );

backboneAdaptor.Backbone = Backbone;

var ractive = new Ractive({
  el: 'main',
  template: '<h1>Hello {{user.name}}!</h1>',
  data: {
    user: user
  },

  // this line tells Ractive to look out
  // for Backbone models
  adapt: [ backboneAdaptor ]
});

License

MIT