React Link Helper

react-link.js

var get = Ember.get, set = Ember.set, computed = Ember.computed;

export default Ember.Component.extend({
  tagName: 'a',
  classNameBindings: ['isActive:active'],
  attributeBindings: ['href'],
  href: null,
  emberRouteName: null,
  
  router: computed(function() {
    var controller = get(this, 'controller');
    if (controller && controller.container) {
      return controller.container.lookup('router:main');
    }
  }),
  
  applicationController: computed(function() {
    var controller = get(this, 'controller');
    if (controller && controller.container) {
      return controller.container.lookup('controller:application');
    }
  }),
  
  isActive: computed(function() {
    var path = get(this, 'applicationController.currentPath');
    return path.indexOf(this.get('emberRouteName')) !== -1;
  }).property('applicatioController.currentPath'),
  
  click: function(evt) {
    evt.preventDefault();
    var router = get(this, 'router'),
        url = get(this, 'href');
    for(var name in router._activeViews) {
      var view = router._activeViews[name][0];
      if(view._reactComponent) {
        var reactRouter = view._reactComponent._renderedComponent;
        if(reactRouter.transitionTo) {
          // TODO: generate with context as well
          if(reactRouter.match(url)) {
            reactRouter.transitionTo(url);
            return;
          }
        }
      }
    }
    router.transitionTo(get(this, 'emberRouteName'));
  }
  
});