Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added more docs

  • Loading branch information...
commit 6067f2d5c1f1b2ece7729fd0a146231e4aaa61f8 1 parent dcc5a0d
@skidding skidding authored
Showing with 71 additions and 1 deletion.
  1. +71 −1 README.md
View
72 README.md
@@ -23,6 +23,74 @@ In this repo you have a TODO list app called TodoVU following the model from [1]
# How to use Mozaic
This section is still under development...
+## Creating a module
+Register a module for `require.js` that can later be imported inside a different module, using the key is it defined under as its alias
+
+In `conf/modules.js`
+```js
+App.the_modules = {
+ // Alias -> actual path in project
+ 'model/user': 'modules/model/user',
+ 'collection/user': 'modules/collection/user',
+ 'widget/Dashboard': 'modules/controller/dashboard',
+ 'widget/Users': 'modules/controller/users',
+ 'widget/users': 'modules/widget/users'
+};
+```
+
+## Creating a widget
+See _Creating a module_ above for adding the widget file as a module
+
+Basic widget class
+```coffee
+# Require the base widget as a dependency
+define ['cs!widget'], (Widget) ->
+
+ class UsersWidget extends Widget
+ subscribed_channels: ['/users']
+ template_name: 'templates/users.hjs'
+
+ get_users: (params) =>
+ ###
+ Listener for changes on the /users data channel
+ ###
+ # Render layout whenever a "reset" event occurs and the entire
+ # users collection is refreshed
+ if params.type is 'reset'
+ # Send entire collection to template and make sure it doesn't
+ # get stringified in the process by setting the 2nd parameter
+ # to false (inefficient example)
+ @renderLayout(users: params.collection.toJSON(), false)
+```
+
+Basic widget template
+```hjs
+<ul>
+ {{#each users}}
+ <li>{{name}}</li>
+ {{/each}}
+</ul>
+```
+
+## Creating a controller
+A controller is a widget that can be mapped to a url route. Contrary to the base widget encapsulation, a controller's template is defined in the `urls.js` config file, inside the route entry
+
+In `conf/urls.js`
+```js
+App.urls = {
+ // Default route (no hashbang or empty one)
+ '': {
+ 'controller': 'Dashboard',
+ 'layout': 'templates/controller/dashboard.hjs'
+ },
+ 'users': {
+ 'controller': 'Users',
+ 'layout': 'templates/controller/users.hjs'
+ }
+};
+```
+_As a convention, controllers are the only capitalized modules_
+
## Creating a data channel
In `conf/datasource.js`
@@ -37,7 +105,9 @@ App.DataSourceConfig = {
}
};
```
-* The channel key should always start with a slash `/`
+_The channel key should always start with a slash `/`_
+
+### Channel options
* __type__ _required_
* `relational` - Uses a collection of models to collect received data, used for list of items of the same type (most cases)
* `api` - Uses a `RawData` object to collect received data, used for endpoints with fixed fields on a single object
Please sign in to comment.
Something went wrong with that request. Please try again.