Backbone.js adaptor for Ractive
Switch branches/tags
Nothing to show
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.
dist
src
test
vendor
.editorconfig
.gitignore
.jshintrc
.npmignore
.travis.yml
CHANGELOG.md
NOTES.md
README.md
bower.json
component.json
gobblefile.js
package.json

README.md

ractive-adaptors-backbone

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

Status

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/ractive-adaptors-backbone@0.3.0/dist/ractive-adaptors-backbone.min.js

Use bower

$ bower i ractive-adaptors-backbone

Use npm

$ npm install --save ractive-adaptors-backbone

Download

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