At this point, for the user to play the game, we are rendering four views. Let's wrap these views up into a single view: the GameView
class. It is a pretty short view, but it will clean up the code in our router, once we start the router. Here's the code for the GameView
class:
var GameView = Backbone.View.extend({ render: function () { var attrs = { collection: this.collection }, info = new InfoView(attrs), clues = new CluesView(attrs), guess = new GuessView(attrs), tokens = new TokensView(attrs); this.$el.append(info.render().el) .append(clues.render().el) .append(guess.render().el) .append(tokens.render().el); return this; } });
In the render
method, we'll create the four views, and append them to the element. We can test this view very easily—just replace the callback
function code that creates the four views with this single line:
$('#main').append(new GameView({ collection: game })...