javascriptbacon.jstwitter-flight

Using Bacon.js with FlightJS


Is Bacon compatible with Twitter's Flight? I saw this talk where they are apparently being used together (https://www.youtube.com/watch?v=D0N1NdE-9u0) but couldn't get a minimal example to work.

This is my flight component with traditional event handling alongside Bacon's event stream. The latter just logs undefined for the data.a and it turns out what's being passed to the function registered with onValue is actually the event object (named e in the traditional handler function) with no access to the data object.

define(function (require) {
  'use strict';
  var c = require('flight/lib/component'),
    $ = require('jquery'),
    B = require('bacon');
  $.fn.asEventStream = B.$.asEventStream;
  return c(f);

  function f() {
    this.after('initialize', function () {
      // traditional handler
      this.on('dummyData', function (e, data) {
        console.log('jquery: ' + data.a);
      });
      // Bacon handler
      this.$node.asEventStream('dummyData').onValue(function (data) {
        console.log('bacon: ' + data.a);
      });
      // emit data object
      this.trigger('dummyData', { a: 'b' });
    });
  }
});

Solution

  • You can pass an optional argument to asEventStream function that you can use to map the event payload:

      this.$node.asEventStream('dummyData', function(e, data) {
         return data;
      }).onValue(function (data) {
        console.log('bacon: ' + data.a);
      });
    

    Take a look at the examples here: https://github.com/baconjs/bacon.js#%24-aseventstream