JSFiddle - React, Tailwind, and code Playground

by dashk

JavaScript

(function (export) { 
    var 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'));
                }
            });
        }
    });
    
})(window);