MarionetteJS Cascading Select

Implementation of the typical Ajax example of three level of select elements with dependency, results in selects change based in his parent selection.

This example use the project https://github.com/enzolutions/marionette-skeleton-app as start point.

Inside you can find how use Nested Views or Marionette Layout, also the Event Manager is used to trigger the proper event based in used selection.

DEMO : http://enzolutions.com/marionette-cascading-select/

Download

$ git clone git@github.com:enzolutions/marionette-cascading-select.git

Usage

This example use a REST API server to get the information related with Clients, Projects of Clients and Tasks of Projects. The Rest server was implemente using Silex Micro Framework

Installing Rest Server

Composer is required.

Inside rest-server execute composer.phar install to install Silex Micro Framewok.

Running Rest Server

After install Silex, you must run inside folder rest-server/web you must run the following command.

$ php -S localhost:8081

You can choose any port available in your system. The URL and port will be using in Collections to get the Model

Configuring Collections

Is required edit all Collections to set the proper URL for Rest Server as you can see in the following example.

define(["marionette",
        "../models/ClientModel"], function(Marionette, Client ) {

    var Clients = Backbone.Collection.extend({
                url: 'http://localhost:8081/rest/clients',
                model: Client
    });

    return Clients;

});

You can use the sample REST server http://silex.7sabores.com/

f you are planning to use your own server to test, remember modify the Silex Middleware after to enable CORS request and avoid errors related invalid client request because the client isn't located under same domain, check the current implementation.

$app->after(function (Request $request, Response $response) {
    //$response->headers->set('Access-Control-Allow-Origin', '*');
    $response->headers->set('Access-Control-Allow-Origin', 'http://YOURSERVER:YOURPORT');
});

Your port is neccessary only if you use other port than 80

---