JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<div class="ttt" id="ttt"></div>


<script type="text/template" id="tttTpl">
  <div class="row">
    <div class="col-xs-12 hi_score_container">
      hi score
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 field_container" id="fieldContainer">
      field
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 informer_container">
      informer
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 current_info_container">
      current info
    </div>
  </div>      
</script>


<script type="text/template" id="cellTpl">
  cell   
</script>

CSS

.ttt .hide{
	display: none !important;
}

.ttt .show{
	display: block !important;
}




/****************************************************************************** GLOBAL_layout */
.ttt{
	width: 300px;
	margin: 20px auto;
}



/****************************************************************************** GLOBAL_blocks: field */
.field{
	position: relative;
	background: #fff;
	margin-bottom: 20px;
}

.cell{
	float: left;
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	overflow: hidden;
}

.zero_mark{
	background: url('../images/zero.png') center center no-repeat;
	background-size: cover;
}

.cross_mark{
	background: url('../images/cross.png') center center no-repeat;
	background-size: cover;
}

JavaScript

window.APP = window.APP || {};

APP.CellModel = Backbone.Model.extend({

  defaults: {
    xCoord: undefined,
    yCoord: undefined,
    mark: 0,
  }        

});


APP.FieldModel = Backbone.Model.extend({

  defaults: {

  }        

});


APP.PlayerModel = Backbone.Model.extend({
  
  defaults: {
    score: 0,
    mark: 1
  }        

});


APP.CompPlayerModel = Backbone.Model.extend({
  
  defaults: {
    score: 0,
    mark: -1
  }        

});


APP.TttView = Backbone.View.extend({  

  initialize: function() {   
    //this.ttt = new APP.PlayerModel();
    //this.ttt = new APP.CompPlayerModel();
    this.fieldView = new APP.FieldView();

    this.render();
  },    

  template: _.template($('#tttTpl').html()),

  render: function () {    
    this.$el.html(this.template());  
    this.$el.find('#fieldContainer').html(this.fieldView.render().el);  
    return this;
  }

});


APP.FieldView = Backbone.View.extend({  

  className: 'field',

  id: 'field',

  initialize: function() {   
    this.cellsViewsArr = [];

    for(var y = 0; y < 3; y++) {
      this.cellsViewsArr[y] = [];

      for(var x = 0; x < 3; x++) {
        var cellModel = new APP.CellModel({
          xCoord: x,
          yCoord: y
        });

        this.cellsViewsArr[y][x] = new APP.CellView({model: cellModel});
      };
    };
  },    

  render: function () {    
    this.renderCells();
    return this;
  },

  renderCells: function () {    
    for(var y = 0; y < 3; y++) {
      for(var x = 0; x < 3; x++) {
        var cellElem = this.cellsViewsArr[y][x].render().el;
        this.$el.append(cellElem);
      };
    };

    return this;
  },

  events:{
    'click .cell' : 'clickHandler'
  },    

  clickHandler: function(event) {
    var targetElem = event.target || event.srcElement,
        xCoord = $(targetElem).attr('data-x-coord'),
        yCoord = $(targetElem).attr('data-y-coord');

    console.log(xCoord, yCoord);
  }

});


APP.CellView = Backbone.View.extend({  

  initialize:...