README.md in frenerator-0.2.0 vs README.md in frenerator-0.2.1

- old
+ new

@@ -29,21 +29,23 @@ ### Javascript structure overview Main javascript file is `application.js` (the one that gets included via a `script` tag) +#### Dependencies + Sprockets for dependency management: `application.js` includes app parts: - 1. `dependencies` Place to include all libs, frameworks, etc. - 2. `namespace` Gives common top level structure and defines `App` - 3. `templates` Handlebars templates - 4. `base` Define base coffee classes here - 5. `collections` -||- collections - 6. `models` -||- models - 7. `views` -||- views - 8. `components` All the top level backbone views live here - 9. `main` - the init code + 1. `dependencies` Place to include all libs, frameworks, etc. + 2. `namespace` Gives common top level structure and defines `App` + 3. `templates` Handlebars templates + 4. `base` Define base coffee classes here + 5. `collections` -||- collections + 6. `models` -||- models + 7. `views` -||- views + 8. `components` All the top level backbone views live here + 9. `main` - the init code _You HAVE to manually include all the components you want to use inside `components.coffee` or your component code will not be compiled in `application.js`_ Components are basically top level views and they live in the `components` dir @@ -59,9 +61,38 @@ components to comunicate with each other. When all components have initialized `App.Dispatch` triggers an `app:ready` event, so that if your component is depending on something else, you can wait until `app:ready` to do your work. It will be more likely that the component you are depending on will be available at the time this event is fired, rather than in your `@initialize` method + +##### Intercomponent communication conventions (events and stuff) + +For controlling components from other components and triggering events you would like +other components to be able to hook into, use the global events channel - `App.Dispatch`. +As far as naming convention goes, events that a component is listening and responding to +should start with `tell:`. The common form is `tell:{component}:to_{do_something}`. +Events that are emmited in the global channel should be in the form `{component}:{event}` + +Example: + +```coffeescript +App.Components.Mothership extends App.View + + initialize: => + @listenTo App.Dispatch, 'tell:mothership:to_takeoff', @takeoff + + takeoff: => + while @speed <= @V2 + @speed += 1 + App.Dispatch.trigger 'mothership:is_airborne' + +``` + +You might find that you have a view that is reused within several components (e.g. you have +more than one instance of that view in memory) and there is no way for other things to tell +which instance is emmiting the event, so they can't hook into the correct event. In these +cases try to find something unique about each instance and put it in the event name after +the `component` name. For example: `tell:drone:#{id}:to_patrol`. I usually use a DOM id. ## Development After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.