SPA Marionette 3 base

The single page application based marionetteJS 3

Installation

Install (node 6 or higher):

git clone https://github.com/Oyola0/spa.marionette3.base.git
cd spa.marionette3.base
npm run start

Develop

npm run dev

Develop and launch watch liveReload server

npm run dev-server

Build

npm run build

Build and launch server

npm run build-sever

Testing

Run karma and lint

npm run test

Run lint javascript files

npm run lint

Run karma test

npm run karma

Core (extend Marionette)

Constructors

• Core.AppRouter (only main application)
• Core.Router
• Core.Collection
• Core.Model
• Core.Controller
• Core.Module
• Core.View
• Core.CollectionView

Methods

• moduleListeners
• triggerToModule
• moduleRequests
• requestToModule
• triggerToApp
• requestToApp
• externalListeners

Module concept

All application is based in modules that load dynamically. The module has a "CHANNEL" defined as name into module.js This "CHANNEL" emitter event in this module.

Structure module.js

return Core.Module.extend({
    name: 'example',                //Mandatory
    view: ExampleView,              //Optional
    router: ExampleRouter,          //Optional
    controller: ExampleController   //Optional
});

A module with router, name should be the same that module.js parent folder.

Module Channel

To propagate the module channel instance use:

this.instanceModel(MyModel, options)
this.instanceCollection(MyCollection, options)
this.instanceView(MyView, options)

Events

Listen the module events (moduleListeners):

moduleListeners: {
    'eventName': 'callback'
}

Trigger event to module (triggerToModule):

this.triggerToModule('eventName', options);

Requests

Declarate requests to module (moduleRequests):

moduleRequests: {
    'requestName': 'requestCallback'
},

requestCallback: function(opts) {
    return 'hello ' + opts;
}

Request to module (requestToModule):

this.requestToModule('requestName', 'world');   //return 'hello world'

App Channel

Events

Trigger event to app (triggerToApp):

this.triggerToApp('navigate', 'moduleFolderName');

this.triggerToApp('goBack');

Requests

Request to app (requestToApp):

this.requestToApp('getDeviceModel');    //return deviceModel

Listen to others Module Channel

Listen the others modules events (externalListeners):

externalListeners: {
    'other-module-name:eventName': 'callback'
}

Libraries

This code works with the following libraries:

• jQuery
• Underscore
• Backbone
• Marionettejs
• Handlebarsjs