Quick shot about how I detect which chessboard field was clicked

This post is a part of Get Noticed! 2017 contest by Maciej Aniserowicz

It is late, so to the point — this post, to be frankly more a quick note that post, will be about how and why I detect which field was clicked.


It’s quite obvious — to track game, to show available moves (in future), etc.


Characters of vertical columns of squares were extracted to separated file:

const characters = [
{character: "a"},
{character: "b"},
{character: "c"},
{character: "d"},
{character: "e"},
{character: "f"},
{character: "g"},
{character: "h"},
return {
characters: () => characters.slice(),

And also they are sliced, to be sure that any holder of instance can not modify characters instance.

Characters were used in characters-row-view module, so there were a great opportunity to use another one new feature from ES 6:

collection: new Backbone.Collection([

It is called Spread operator, and can be used to create new array containing elements from another array. It’s more compact, but I think many people (including me) need some time to get used to it.

Collections for row views need another model property character, like white-row-view:

collection: new Backbone.Collection([
{type: "number-left"},
{type: "white", character: characters[0].character},
{type: "black", character: characters[1].character},
{type: "white", character: characters[2].character},
{type: "black", character: characters[3].character},
{type: "white", character: characters[4].character},
{type: "black", character: characters[5].character},
{type: "white", character: characters[6].character},
{type: "black", character: characters[7].character},
{type: "number-right"},

Which can be used to determine which “character field” was clicked (square-view):


Second part of this ES 6 template string had to be extracted to separated method, because contains code from which I am not proud:

_getRowNumber: function () {
const id = this.$el.parent().attr("id");
return id.substr(id.length - 1);

It takes its parent, and because parent contain number in id attribute, code base on this to calculate row number. I didn’t find a way, how to inject this value to square-view in other way. If you know how to do it better (and I’m sure there is a better, cleaner and DOM independent way), do not hesitate to write a comment which will guide me to nicer solution!

And of course, chessboard has to be “clickable”:

if (this._isChessboardField()) {
this.$el.attr("role", "button");
this.$el.attr("tabindex", "0");

And this is another thing which has serious drawbacks: it is not as accessible as native button element. But at the moment, it’s OK for me, with TODO comment which will remind me that something is a little bit wrong (Linter is complaining about it, and that’s good).


As always (and especially with today’s post and code), if you know how my problems can be resolved in a better way, feel free to leave a comment!