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: