JSFiddle - React, Tailwind, and code Playground

by ipark

HTML

<script src="https://cdn.jsdelivr.net/egjs/1.4.1/eg.js"></script>
<div id="result">Initial Text</div>

JavaScript

var entryPoint;
// Module B is entry point.(user interaction)
var ModuleB = (function() {
  return eg.Class.extend(eg.Component, {
    construct: function() {

      this.on('start', function(event) {
        if (this.trigger('beforeSelect')) {
          $('#result').text('stop does not worked');
        }
      });
    }
  });
})();

var ModuleA = (function() {
  var moduleB = new ModuleB();
  entryPoint = moduleB;

  return eg.Class.extend(eg.Component, {
    construct: function() {

      moduleB.on('beforeSelect', $.proxy(function(event) {
        // not working version.
        this.trigger('beforeSelect', event);

        // working version.
        // if (!this.trigger('beforeSelect')) { event.stop(); }
      }, this));
    }
  });
})();

var Controller = (function() {
  var moduleA = new ModuleA();

  return eg.Class.extend(eg.Component, {
    construct: function() {

      moduleA.on('beforeSelect', $.proxy(function(event) {
        event.stop();
      }, this));
    }
  });
})();

var ctrl = new Controller();
setTimeout(function() {
  entryPoint.trigger('start');
}, 1000);