Sample components of client-side architecture

gistbook.json

{"title":"Sample components of client-side architecture","author":"cmaher","pages":[{"pageName":"","sections":[{"type":"javascript","source":"var SharedContextModel = Backbone.Model.extend({\n\tinitialize: function () {\n\t\tthis.set(JSON.parse($('#initialContext').html()));\n\t},\n\n\tpushChangesTo: function (other) {\n\t\tother.set(this.toJSON());\n\t\tother.listenTo(this, 'change', _.bind(function () {\n\t\t\tother.set(this.toJSON());\n\t\t}, this));\n\t}\n});"},{"type":"javascript","source":"var BaseAppRouter = Marionette.AppRouter.extend({\n\n    initialize: function(options) {\n    \tthis.sharedContextModel = options.sharedContextModel;\n        this.listenTo(this.sharedContextModel, 'change', this._setQueryString);\n    },\n\n    _setQueryString: function() {\n        // get a new set of params consisting of the old params extended by new params from the SCM\n        var newParams = this.sharedContextModel.toJSON();\n        var oldParams = $.url().param();\n        var allParams = _.extend({}, oldParams, newParams);\n\n        // if the params have changed, update the url\n        if (!_.isEqual(oldParams, allParams)) {\n            var currentPath = $.url().attr('path');\n            var currentPathWithoutRoot = currentPath.replace(this.getRootPath(), '');\n            this.navigate(currentPathWithoutRoot + '?' + $.param(allParams), {replace: true});\n        }\n    }\n});\n"},{"type":"javascript","source":"var SearchlightApp = Marionette.Application.extend({\n    initialize: function (options) {\n        ConductorUtils.assignRequiredOptions(this, options, ['MainViewClass', 'Router']);\n        this.sharedContextModel = new SharedContextModel();\n\n        // Connect the sharedContextModel to legacy global objects\n        this.bridgeSharedContextModelToGlobal();\n\n        this.rootView = new Marionette.LayoutView({\n            regions: {content: '#content'}\n        });\n\n        this.router = new this.Router({\n            sharedContextModel: this.sharedContextModel\n        });\n    },\n\n    bridgeSharedContextModelToGlobal: function () {\n        //connect to legacy code...\n    },\n\n    onStart: function () {\n        Backbone.history.start({\n            pushState: true,\n            root: this.router.getRootPath()\n        });\n        this.rootView.getRegion('content').show(this.createPageView());\n    },\n\n    createPageView: function () {\n        var pageOptions = _.pick(this, ['sharedContextModel', 'MainViewClass']);\n        return new PageView(pageOptions);\n    }\n});\n"},{"type":"javascript","source":"var MyWidget = WidgetView.extend({\n\tonDestroy: function () {\n\t\tthis.widgetModel.stopListening();\n\t\tthis.collection.stopListening();\n\t}\n}, {\n\tcreateView: function (options) {\n\t\tvar widgetModel = option.widgetModel || this.getDefaultWidgetModel(options);\n\t\toptions.sharedContextModel.pushChangesTo(widgetModel);\n\t\tvar collection = new Backbone.Collection();\n\t\tMyCollectionAdapter.adapt(collection, widgetModel);\n\t\tvar widgetOptions = {\n\t\t\twidgetModel: widgetModel,\n\t\t\tcollection: collection\n\t\t};\n\t\treturn new this(widgetOptions);\n\t},\n\n\tgetDefaultWidgetModel: function (options) {\n\t\tvar modelOptions = _.extend({ type: 'MY_WIDGET'},\n\t\t\t_.pick(options, ['widgetOpt1', 'widgetOpt2']);\n\t\treturn new WidgetModel(modelOptions);\n\t}\n});\n\nvar MyCollectionAdapter = {\n\tadapt: function (collection, model) {\n\t\tcollection.listenTo(model, 'change:widgetOpt1 change:widgetOpt2', collection.fetch);\n\t}\n}\n   "}]}],"public":true}