uberVU, the leader of online social media monitoring, makes its own Coffee :)
This is our very own, home-brewed SPA framework. More details: https://github.com/uberVU/mozaic/raw/master/mozaic.pdf
In this repo you have a TODO list app called TodoVU following the model from 1.
This section is still under development...
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
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'
};
See Creating a module above for adding the widget file as a module
Basic widget class
# 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
<ul>
{{#each users}}
<li>{{name}}</li>
{{/each}}
</ul>
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
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
In conf/datasource.js
App.DataSourceConfig = {
channel_types: {
'/users': {
type: 'relational',
collection: 'users',
url: '/api/users?format=json'
}
}
};
The channel key should always start with a slash /
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 objectconf/modules.js
, be it either a BaseCollection
or a RawData
subclassGET
, POST
, PUT
and DELETE
); it can be omitted if the channel data is meant to be both created and consumed on the client only