gistfile1.html

var GamePositionRow = React.createClass({
  focus: function(endNumber) {
    var el = this.refs["end_score_" + endNumber];
    if (el) {
      el.getDOMNode().focus();
      getChannel("score:focus")(endNumber);
    }
  },

  render: function() {
    var path = _.conj(this.props.path, "end_scores");
    var state = this.props.state;
    //var channel = getChannel("changed:score");

    var inputs = _.map_indexed(function(index, es) {
      var esj = _.clj_to_js(es);
      var npath = _.conj(path, index, "score");
      var channelScore = _.comp(_.partial(fireEvent, npath, esj.score), toInt, valueFromEvent);
      //var channelFocus = _.partial(getChannel("score:focus"), es.end_number);

      var classes = cx({
        'end-hammer': es.isHammer,
        'danger': (es._isValid == false),
      });

      console.log(_.get(es, "score"), "debug");

      return (
        <td className={classes} key={esj.id}>
          <input
            ref={"end_score_"+esj.end_number}
            className="string optional form-control score"
            type="text"
            maxLength="1"
            max="8"
            tabIndex={esj.tabindex}
            value={_.get(es, "score")}
            onBlur={channelScore}
            />
        </td>
      )
    }, _.get(state, "end_scores"));

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