gistfile1.html

var GamePositionRow = React.createClass({
  render: function() { 
    var attrs = _.pick(this.props, "isExtraEndChanged", "indexToFocus");
    var channel = getChannel("changed:score");

    var inputs = _.map(this.props.end_scores, function(es) {
      var channelScore = comp(channel, withId(es.id), value("score"));
      var classes = cx({
        'end-hammer': es.isHammer,
      });

      if (attrs.isExtraEndChanged && attrs.indexToFocus == es.tabindex) {
        var needFocus = true;
      }

      return (
        <td className={classes} key={es.id}>
          <input
            autoFocus={needFocus}
            className="string optional form-control score"
            type="text"
            maxLength="1"
            max="8"
            tabIndex={es.tabindex}
            defaultValue={es.score}
            onBlur={channelScore} />
        </td>
      )
    });

    return (
      <tr key={this.props.id}>
        <td className={this.props.color+"-rock"}>
          <b>{this.props.team} {this.props.first_hammer && "*"}</b>
        </td>
        {inputs}
        <td>{this.props.total}</td>
      </tr>
    )
  }
});