Skip to content

Instantly share code, notes, and snippets.

@brian-mann
Created December 3, 2012 22:04
Show Gist options
  • Select an option

  • Save brian-mann/4198530 to your computer and use it in GitHub Desktop.

Select an option

Save brian-mann/4198530 to your computer and use it in GitHub Desktop.
Component Structure
## /backbone/apps
## /backbone/entities
## /backbone/mixins
## /backbone/components
## Example Component as a class instantiated from an app's controller
## /backbone/components/pattern_selector/pattern_selector.js
@YOURAPP.module "Components", (Components, App, Backbone, Marionette, $, _) ->
class Components.PatternSelector
constructor: (options = {}) ->
## do config stuff here to tell this component how to operate
_.defaults options,
key: value
do: this
and: that
returnView: true
if options.returnView
view = @getView opts
view
getView: (opts) ->
new PatternSelector.View
model: opts.model
collection: opts.collection
config: opts.config
## Example views managed by your Component
## /backbone/components/pattern_selector/views/view.js
@YOURAPP.module "Components.PatternSelector", (PatternSelector, App, Backbone, Marionette, $, _) ->
class PatternSelector.View extends Marionette.ItemView
##typical view config here
## How this Component is used elsewhere
## /backbone/apps/liners/controllers/builder_controller.js
@YOURAPP.module "Liner.LinerBuilder", (LinerBuilder, App, Backbone, Marionette, $, _) ->
LinerBuilder.Controller =
showLiner: (opts) ->
patternSelector = new App.Components.PatternSelector(opts)
App.somethingRegion.show patternSelector.getView()
## now you have the patternSelector instance, you can do what you want with it, or let it roll
## you don't have to make the pattern selector a class with an instance either, that would just be an example of something you want to work further with normally. For things that just auto work the component would probably take more config like what region to insert itself into
@jfromell

Copy link
Copy Markdown

When using this structure the sub-modules turn out as undefined for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment