Edit in JSFiddle

var size = ko.observable(8);
var rows = ko.pureComputed(function() {
  var n = size();
  return _.chain(n).range().map(function(i) {
    return {
      isEven: i % 2 === 0,
      cells: _.chain(n).range().map(function(j) {
        return {
          isEven: j % 2 === 0,
        };
      }).value()
    };
  }).value();
});
var viewModel = {
  size: size,
  rows: rows
};

var chessBoard = document.getElementById('chessBoard');
ko.applyBindings(viewModel, chessBoard);
<div id="chessBoard">
  <label>Размер поля:
    <input type="number" min="1" max="14" step="1" data-bind="textinput: size" />
  </label>
  <div class="chess-board" data-bind="foreach: rows">
    <div data-bind="foreach: cells, css: {'even': isEven, 'odd': !isEven}">
      <div data-bind="css: {'even': isEven, 'odd': !isEven}" class="cell">
        <div>

        </div>
      </div>
    </div>
  </div>
</div>
.chess-board {
  display: table;
  .odd {
    display: table-row;
    .odd {
      background-color: black;
    }
    .even {
      background-color: white;
    }
  }
  .even {
    display: table-row;
    .odd {
      background-color: white;
    }
    .even {
      background-color: black;
    }
  }
  .cell {
    display: table-cell;
    div {
      min-height: 20px;
      min-width: 20px;
    }
  }
}

External resources loaded into this fiddle: