Search list

var d = React.DOM;

component.debug();

var Match = component('Match', function (cursor) {
  return d.li({},
              d.a({ href: cursor.get('url') }, cursor.get('title')));
});

var Search = component('Search', function (cursor) {
  return d.div({},
              SearchBox(cursor),
              Matches(cursor));
});

var structure = immstruct({
  search: "",
  libs: [
    { title: "Backbone.js", url: "http://documentcloud.github.io/backbone/" },
    { title: "AngularJS", url: "https://angularjs.org/" },
    { title: "jQuery", url: "http://jquery.com/" },
    { title: "Prototype", url: "http://www.prototypejs.org/" },
    { title: "React", url: "http://facebook.github.io/react/" },
    { title: "Omniscient", url: "https://github.com/omniscientjs/omniscient" },
    { title: "Ember", url: "http://emberjs.com/" },
    { title: "Knockout.js", url: "http://knockoutjs.com/" },
    { title: "Dojo", url: "http://dojotoolkit.org/" },
    { title: "Mootools", url: "http://mootools.net/" },
    { title: "Underscore", url: "http://documentcloud.github.io/underscore/" },
    { title: "Lodash", url: "http://lodash.com/" },
    { title: "Moment", url: "http://momentjs.com/" },
    { title: "Express", url: "http://expressjs.com/" },
    { title: "Koa", url: "http://koajs.com" },
  ]
});

render();
structure.on('next-animation-frame', render);

function render () {
  ReactDOM.render(Search(structure.cursor()), el);
}

Help

Use el to get to a dom element you can render to with your Omniscient components!

Playground examples

Available globals/variables

Use el to get to an element you can render to with your Omniscient components!

React: React instance
omniscient/component: Omniscient instance
immstruct: Immstruct instance
Immutable: Immutable.js instance
Cursor: Cursor (Immutable.js contrib)
redux: redux instance
reduxThunk: reduxThunk instance
reactRedux: reactRedux instance

Testing

describe: new test suite (mocha)
it: new test (mocha)
xit: pending test (mocha)
xdescribe: pending scenario (mocha)
before/after: run code before or after all tests (mocha)
beforeEach/afterEach: run code before or after each tests (mocha)
chai: chai.js assertion library