Cacher is the code snippet organizer for pro developers

React.Backbone = {
  listenToProps: function(props) {
    _.each(this.updateOnProps, function(events, propName) {
      switch(events) {
      case 'collection': 
        events = 'add remove reset sort';
        break;
      case 'model':
        events = 'change';
      }
      this.listenTo(props[propName], events, function() { this.forceUpdate(); })
    }, this)
  },

  componentDidMount: function() {
    this.listenToProps(this.props);
  },

  componentWillReceiveProps: function(nextProps) {
    this.stopListening();
    this.listenToProps(nextProps);
  },

  componentWillUnmount: function() {
    this.stopListening();
  }
}

_.extend(React.Backbone, Backbone.Events);

var List = React.createClass({
  mixins: [React.Backbone],
  updateOnProps: { 'items': 'collection' },
  
  render: function() {
    var items = this.props.items.map(function(item) {
      return <Item item={item} key={item.cid}/>
    });
    return <ul>{ items }</ul>;
  }
});

var Item = React.createClass({
  mixins: [React.Backbone],
  updateOnProps: { 'item': 'model' },
  
  render: function() {
    return <li><span>{ this.props.item.get('name') }</span><p>{ this.props.item.get('description') }</p></li>;
  }
});

var List = Backbone.Marionette.CollectionView.extend({
  itemView: Item,
  tagName: 'ul'
});

var Item = Backbone.Marionette.ItemView.extend({
  tagName: 'li',
  template: function(data) {
    return '<span rv-text="model.name"></span><p rv-text="model.description"><p>';
  },

  onRender: function() {
    this.binder = rivets.bind(this.el, { model: this.model });
  },

  onClose: function() {
    if (this.binder) this.binder.unbind();
  }
});