React component wrapped for DI container using domain model instead of props.

gistfile1.js

/** @jsx React.DOM */

goog.provide('app.foo.react.FooSubscribe');

goog.require('este.thirdParty.react');

/**
 * Injected via DI container.
 * @param {app.visitor.Model} visitor
 * @constructor
 */
app.foo.react.FooSubscribe = function(visitor) {

  /** @desc Foo subscribe button. */
  var MSG_FOO_SUBSCRIBE_BUTTON = goog.getMsg('Get foo updates by email');

  /** @desc Foo unsubscribe button. */
  var MSG_FOO_UNSUBSCRIBE_BUTTON = goog.getMsg('Unsubscribe from this foo.');

  this.reactClass = React.createClass(/** @lends {React.ReactComponent.prototype} */{

    render: function() {
      var buttonText = visitor.hasFooSubscribed ? MSG_FOO_SUBSCRIBE_BUTTON : MSG_FOO_UNSUBSCRIBE_BUTTON;

      return (
        <div className="foo-subscribe">
          <button onClick={this.onButtonClick}>{buttonText}</button>
        </div>
      );
    },

    onButtonClick: function() {
      visitor.toggleFooSubscribe()
    }

  });
};