Accessing an event's target in famo.us

Question

How can one access the target of an event, say a click, form the code? I have:

var eh = new EventHandler(); and

eh.on('click', function(obj) {
                rc.setOptions(
                {
                    inTransition: true,
                    outTransition: false
                });
                var surfaceProps = obj.origin.getProperties();

as part of a sample app. The surfaces created in a function before in the code pipe click events to this eh event handler as;

surf.pipe(eh);

However, The clicks does not work as expected. In JS console it gives the following error:

TypeError: undefined is not an object (evaluating 'obj.origin.getProperties')

Answer 1

In the sample app, they are referring to a custom event emitted from within the selection within their Scrollview to an EventHandler. The article you refer to was written early in the releases of Famo.us.

The code snippet below will show how this could be done using the 'click' as the custom event. Probably not best practices, because it is an event for the mouse click event (MouseEvent). I would rename it to something else in a production app.

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var OptionsManager = require('famous/core/OptionsManager');
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var EventHandler = require('famous/core/EventHandler');
  var StateModifier = require('famous/modifiers/StateModifier');
  var RenderNode = require('famous/core/RenderNode');
  var View = require('famous/core/View');
  var Transform = require('famous/core/Transform');
  var SequentialLayout = require("famous/views/SequentialLayout");

  var mainContext = Engine.createContext();
  var sequentialLayout = new SequentialLayout();
  var surfaces = [];
  sequentialLayout.sequenceFrom(surfaces);

  var eh = new EventHandler();
  eh.on('click', function(obj) {
    console.log('obj event', obj.event);
    var surfaceProps = obj.origin.getProperties();
    console.log('obj properties', JSON.stringify(surfaceProps));
  });

  function _eventHandler(e) {
    console.log('event', e, this);
    var surfaceProps = this.getProperties();
    console.log('surfaceProps', surfaceProps);
    this.setContent(JSON.stringify(surfaceProps));

    eh.emit('click', {
      event: e,
      origin: this
    });
  };

  var numberofItems = 10;
  var itemHeight = 45;
  var itemWidth = 20;
  for (var i = 0; i < numberofItems; i++) {
    var surface = new Surface({
      properties: {
        backgroundColor: "hsl(" + (i * 360 / 120) + ", 100%, 50%)",
      }
    });
    surface._mod = new StateModifier({
      size: [itemWidth, itemHeight], // <- Changed the width here!!!
      origin: [0.5, 0],
      align: [0.5, 0],
      proportions: [i + 1, 1]
    });
    var view = new RenderNode();
    view.add(surface._mod).add(surface);
    view._surface = surface;
    surfaces.push(view);

    //surface.pipe(eh);
    surface.on('click', _eventHandler);

  }

  mainContext.add(sequentialLayout);

  Engine.on('click', function(e) {
    for (var i = 0; i < surfaces.length; i++) {
      var random = Math.random() * surfaces.length + itemWidth;
      surfaces[i]._surface._mod.setProportions([random, 1], {
        duration: 1000
      });
    }
  });

});

require(['main']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>



<div class="test-container">
  <div id="famous-app"></div>
</div>

Answer 2

If I'm understanding your question correctly, this feature just landed in the latest release:
Add the famous source object to forwarded events

Now you can just do:

eh.on('click', function(event) {
  var famousSurface = event.target;
  var domElement = famousSurface._currentTarget;
});