The clues for the words—the definitions—will need to appear above the tokens. The CluesView
class is pretty simple:
var CluesView = Backbone.View.extend({ tagName: 'table', render: function () { this.collection.forEach(function (word) { this.el.appendChild(new ClueView({ model: word }).render().el); }, this); return this; } });
The clues will be in a table. In the render
method, we'll loop over the collection, rendering a ClueView
class for each Word
model. The ClueView
class is where all the action takes place. Here's the ClueView
class's code:
var ClueView = Backbone.View.extend({ tagName: 'tr', template: _.template($('#clue').html()), initialize: function () { Backbone.on('correct', this.correct, this); }, render: function () { this.el.innerHTML = this.template(this.model.toJSON()); return this; }, correct: function (word) { if (this.model.get('word') === word.get('word')) { this.$el.addClass(...