react.jsx

define(function(require) {
  var React = require('react'),
      Backbone = require('backbone');

  return React.createClass({
    componentWillMount: function() {
      this.props.model.on('change', function() {
        this.forceUpdate();
      }.bind(this));
    },

    setter: function(name, e) {
      this.props.model.set(name, e.target.textContent);
    },

    render: function() {
      return (
        <div className="resume__head">
          <div className="info">
            <span className="info__item info__item-phone empty" contentEditable={true}
              onInput={this.setter.bind(this, 'phone')}>
              {this.props.model.get('phone')}
            </span>
            <span className="info__item info__item-mail empty" contentEditable={true}
              onInput={this.setter.bind(this, 'email')}>
              {this.props.model.get('email')}
            </span>
            <span className="info__item info__item-map empty">
                <span contentEditable={true} onInput={this.setter.bind(this, 'city')}>
                  {this.props.model.get('city')}
                </span>,
                <span contentEditable={true} onInput={this.setter.bind(this, 'country')}>
                  {this.props.model.get('country')}
                </span>,
                <span contentEditable={true} onInput={this.setter.bind(this, 'location')}>
                  {this.props.model.get('location')}
                </span>
            </span>
          </div>
          <h2 className="resume__name empty">
            <span contentEditable={true} onInput={this.setter.bind(this, 'firstName')}>
              {this.props.model.get('firstName')}
            </span>
            <br />
            <span contentEditable={true} className="resume__surname empty"
              onInput={this.setter.bind(this, 'lastName')}>
              {this.props.model.get('lastName')}
            </span>
          </h2>
        </div>
      );
    }
  });
});