Skip to content
aldonline edited this page Oct 14, 2014 · 9 revisions

While radioactive is designed to be a low level API, we decided include a few popular datasources. This allows you to get started writing you app without thinking too much about the underlying integrations. As your requirements grow you can move into more advanced patterns and third party modules.

radioactive.data provides out of the box support for:

  • AJAX/JSON datasources
  • HTML UI input elements
  • Firebase

Working with radioactive.cell and radioactive.data can get you a long way.

AJAX / JSON

radioactive.data(url)

Uses jQuery.getJSON() under the covers.

var images = radioactive.data("http://api.flickr.com/services/feeds/photos_public.gne?&tags=cafe&format=jsonjsoncallback=?");

radioactive.react(function(){
  console.log( images() );
})

HTML UI Elements

Streaming data from the UI

  • radioactive.data('#input-id-selector')
  • radioactive.data('.input-class-selector')
  • radioactive.data(inputElement)

You can use these cells to both read and write data.

var name = radioactive.data('#name-text-input');

// sets the value in the text input
name("Aldo");

// reads the value
console.log( name() );

// reads the value in a reactive context ( will reevaluate if changed )
radioactive.react(function(){
  console.log( name() );
})

The UI element must exist at the time of cell creation. The cell will take its initial value from the value of the input.

For more advanced UI datasources see the third party modules.

Firebase Streams

  1. Include the Firebase javascript client
  2. Setup Authentication in the Firebase client if needed
  3. Use radioactive.data passing a firebaseio.com URL
var ref = radioactive.data("https://xxx.firebaseio.com/data");

// set data
ref("new data");

// get data in a reactive context
radioactive.react(function(){
  console.log( ref() );
})