JSFiddle - React, Tailwind, and code Playground

by jeffutter

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.2.2/backbone.marionette.min.js"></script>
<script src="https://rawgit.com/spoike/refluxjs/master/dist/reflux.js"></script>
<div id="m"></div>

JavaScript

/* jshint devel:true */
var Actions = Reflux.createActions([
  "noteAdded"
]);

var noteStore = Reflux.createStore({
  listenables: Actions,
  init: function() {
    this.collection = [];
  },
  getState: function() {
    return this.collection;
  },
  getInitialState: function() {
    return []
  },
  onNoteAdded: function(note) {
    var id = this.collection.length+1;
    this.collection.push({id: id, note:note});
    this.trigger(this.collection);
  }
});

var ChildView = Marionette.ItemView.extend({
  getTemplate: function(){return _.template('<%= note %>');}
});

var CollectionView = Marionette.CollectionView.extend({

  // Need to figure out a better way to include these without overriding backbone/marionette's methods
  refluxListenTo: Reflux.ListenerMethods.listenTo,
  validateListening: Reflux.ListenerMethods.validateListening,
  fetchInitialState: Reflux.ListenerMethods.fetchInitialState,

  el: '#m',
  childView: ChildView,
  initialize: function() {
    this.collection = new Backbone.Collection();
    this.refluxListenTo(noteStore, this.update, this.update);

    this.collection.on('all', this.all);
  },
  update: function(collection) {
    // Using .set here makes backbone smarter and doesn't re-render the whole colection every time
    this.collection.set(collection);
  },
  all: function(a,b){
    console.log(a,b);
  }
});
// _.extend(CollectionView.prototype,Reflux.ListenerMethods);

var collectionView = new CollectionView();
collectionView.render();

Actions.noteAdded('baz');
Actions.noteAdded('bang');
Actions.noteAdded('bap');