Last active
May 20, 2016 21:03
-
-
Save dashk/5770073 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function (export) { | |
var App = export.App = {}; | |
// Stores state/current views of the App | |
App.state = {}; | |
App.state.currentPlayer = null; | |
// Model containing the player | |
App.PlayerModel = Backbone.Model.extend({}); | |
// Single Player View (Assuming you have a collection view for list of players) | |
App.PlayerCardView = Backbone.View.extend({ | |
model: App.PlayerModel, | |
template: _.template('<%= id %>'), | |
render: function(parentEl) { | |
// Render player | |
this.$el.html(this.template(this.model.toJSON())); | |
// Append player view to parent container | |
if (parentEl) { | |
parentEl.append(this.$el); | |
} | |
return this; | |
} | |
// Don't forget to clean up as well! | |
}); | |
// Router | |
App.Router = Backbone.Router.extend({ | |
routes: { | |
'player/:id': 'showPlayer' | |
}, | |
showPlayer: function(id) { | |
// Unload current player view, if necessary | |
// Construct model | |
var player = App.state.currentPlayer = new App.Player({ | |
id: id | |
}); | |
// Pass model to the new player view | |
var view = App.state.currentPlayerView = new App.PlayerCardView({ | |
model: App.state.currentPlayer | |
}); | |
// At this time, you should probably show some loading indicator as you're fetching data from the server | |
// Fetch data | |
player.fetch({ | |
success: function() { | |
// This would be called when data has been fetched from the server. | |
// Render player on screen | |
view.render($('#parentContainerId')); | |
} | |
}); | |
} | |
}); | |
// Initializes the App | |
App.init = function() { | |
// Kick off router | |
App.state.router = new App.Router(); | |
export.Backbone.history.start(); | |
}; | |
})(window); | |
// Start the app! | |
window.App.init(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment