Reactive-coffee for Meteor

Introduction

Reactive-coffee is a Coffeescript reactive library (link) that makes it easier to create rich, reusable web components. It automate almost everything in reactive web app. I love the fact that Reactive-coffee offers this powerful reactive programming paradigm that play well with Meteor, you don't even need to write a html template.

Install

Make sure you have Meteor and Meteorite installed.

meteor add mrt:reactive-coffee

Usage

Basic Usage rx, rx.rxt

See official documentation here. We also built a Meteor demo site: Reactive-Coffee-Demo.meteor.com

Connecting Meteor rx.meteor.find() and rx.meteor.findOne()

APIs

• rx.meteor.find( collection, selector, options)
  • returns rx.array, and each element in the array is an regular object
  • use .all() to fetch all the elements in the rx.array
• rx.meteor.findOne( collection, selector, options)
  • returns rx.cell
  • use .get() to fetch the element in the rx.cell

collection should be an instance of Meteor.Collection.

Please refer to official api to learn more about rx.array and rx.cell, doc.

Workflow

Highly recommended for coffeescript lovers.

• 0. Initialization and importTags

Meteor.startup ->
  window.bind = rx.bind    # shorthand for bind function
  rx.rxt.importTags()  # import p, span, div, etc. tags as functions into the namespace

• 1. Populate Meteor.Collection instance to a rx.array or rx.cell, e.g.

todos = rx.meteor.find Todo, {}, {sort: {created: -1}}          # returns rx.array
latestTodo = rx.meteor.findOne Todo, {}, {sort: {created: -1}}  # returns rx.cell

• 2. Hook/Bind to Html elements

$('foo').prepend(
  span {}, bind -> [latestTodo.get().title]
  div {}, bind -> todos.all().map (todo) ->
    div todo.title
)

• 3. CRUD operation on Meteor.Collection will automatically reflect on rx.array or rx.cell instance. For example:

Todo.update todo._id, {$set: {isCompleted: true}}

Thanks

Thanks for yang/reactive-coffee