Untitled

<!doctype html>
<html>
    <head>
        <title>Backbone Test</title>

        <script type="text/javascript" src="/javascript/jquery.js"></script>
        <script type="text/javascript" src="/javascript/underscore.js"></script>
        <script type="text/javascript" src="/javascript/backbone.js"></script>

    </head>
    <body>
        <div id="header">header</div>
        <div id="main"></div>
        <div id="footer">footer</div>
        <script type="text/javascript">
            /**
             * /javascript/application/unlocked.js
             */
            var unlocked =
            {
                //initialization code
                initialize: function(options)
                {
                    this.options = _.extend(
                    {
                        historyOptions:
                        {
                            pushState: true
                        }
                    }, options);

                    Backbone.history.start(this.options.historyOptions);
                },

                //common methods
                loadRemoteTemplates: function(templates, async)
                {
                    var self = this;

                    if(_(templates).isObject())
                    {
                        async = self.defaultValue(async, true);

                        _(templates).each(function(url, key)
                        {
                            $.ajax(
                            {
                                url: url,
                                async: async,
                                success: function(response)
                                {
                                    self.loadTemplate(key, response)
                                }
                            });
                        });
                    }
                },

                loadTemplate: function(key, template)
                {
                    this.templates[key] = _.template(template);
                },

                renderTemplate: function(key, context)
                {
                    return this.templates[key](context);
                },

                defaultValue: function(variable, defaultValue)
                {
                    return (!_(variable).isUndefined()) ? variable : defaultValue;
                },

                //common members
                restUrlPart: '/api/v1',
                templates: {},

                //modules code
                module: function()
                {
                    var modules = {};

                    return function(name)
                    {
                        if(modules[name])
                        {
                            return modules[name];
                        }

                        return modules[name] = {
                            views: {},
                            models: {},
                            collections: {},
                            routes: {}
                        };
                    };
                }()
            };

            /**
             * /javascript/application/modules/core.js
             */
            (function($)
            {
                var core = unlocked.module('core');

                //add routes
                core.routes.standard = Backbone.Router.extend(
                {
                    routes:
                    {
                        "": "home",
                        "/": "home",
                        "pageTwo": "pageTwo"
                    },

                    home: function()
                    {
                        new core.views.helloWorld();
                    },

                    pageTwo: function()
                    {
                        new core.views.buttonTwo();
                    }
                });

                //add models

                //add collections

                //add views
                core.views.helloWorld = Backbone.View.extend(
                {
                    el: $('#main'),

                    events:
                    {
                        'click #one': 'buttonOne',
                        'click #two': 'buttonTwo'
                    },

                    initialize: function()
                    {
                        _.bindAll(this, 'render');

                        this.render();
                    },

                    render: function()
                    {
                        var context = {hello: 'Ryan'};
                        var html = unlocked.renderTemplate('core.helloWorld', context);
                        this.$el.empty().html(html);

                        return this;
                    },

                    buttonOne: function()
                    {
                        console.log('one');
                    },

                    buttonTwo: function()
                    {
                        var view = new core.views.buttonTwo();
                    }
                });

                core.views.buttonTwo = Backbone.View.extend(
                {
                    el: $('#main'),

                    initialize: function()
                    {
                        _.bindAll(this, 'render');

                        this.render();
                    },

                    render: function()
                    {
                        var html = unlocked.renderTemplate('core.buttonTwo');
                        this.$el.empty().html(html);

                        return this;
                    }
                });
            })(jQuery);

            /**
             * /javascript/application/application.js
             */
            (function($)
            {
                //all javascript should be properly loaded now
                $(document).ready(function()
                {
                    var templates =
                    {
                        "core.helloWorld": '/javascript/application/templates/helloWorld.us',
                        "core.buttonTwo": '/javascript/application/templates/buttonTwo.us'
                    };
                    unlocked.loadRemoteTemplates(templates, false);
                    unlocked.initialize();
                });
            })(jQuery);
        </script>
    </body>
</html>