retrieve URL parameters to pre select multi select list - marionette

Question

I'm fairly new to Marionette. I've a router that passes parameters. The template has few check boxes, radio button and a multi select list. When the template is rended, the checkbox and radio button behaves as per the parameter values. Im trying to find the right way to pass parameters so that the items in the multi select list box will get populated. Is it possible ? If not, is it possible to retrieve the URL from the router and update the list box in onBeforeShow function ?

My router looks similar to this. /search/{"isMine":true,"radioButton":"a1"}

and the template is as follows

<input type="radio" name="radioButton">
<input id="isMine" type="checkbox" id="isMine" >
<select name="optionsList" id="optionsList" multiple>
   <option value="1"> One < /option>
   <option value="2"> Two < /option>
   <option value="3"> Three < /option>
</select>

I tried the following but the items in the listbox are never getting selected when the template renders.

#search/{"taken":true,"radioButton":"a1", "optionsList" : ['1','2']}

Answer 1

This is totally possible, but there are a few steps to follow.

Overview

First configure your routes in a Marionette AppRouter (see Configure Routes). Make sure you follow the route spec spelled out by Backbone (see Routes).

Route

Your route will end up looking something like:

search/:taken/radioButton:radio/optionsList:optarray

where, taken will take a truthy or falsy parmeter, radioButton will take a string and optarray will be a stringyfied array (see JSON.stringify).

For example, if take == false and radioButton == '33a' and optarray == 1`, the route may be:

"search/0/radioButton:33a/optionsList:1"

Route Handler

Every route in AppRouter must be matched to a function. This function will catch the parameters captured from the route.

Sample

Say that you'll match your route to some method in the AppRouter called showOptionsView. Then showOptionsView will receive the parameters captured from the route.

In essence you'll put together something like this:

var OptionsLayout = Marionette.LayoutView.extend({...});
var OptionsView =  Marionette.ItemView.extend({...});

var appOptionsLayout = new OptionsLayout;

var MyRouter = Marionette.AppRouter.extend({
 routes : {
    "search/:taken/radioButton:radio/optionsList:optarray": "showOptionsView"
  },

  showView: function(taken, radioButton, optArray) {
    var newOptionsView = new OptionsView({
        taken: taken,
        radioButton: radioButton,
        optionArray: JSON.parse(optArray)
    })
  }

});

How you implement the options in the template for OptionsView I'll leave up to you. What this question answers is how to get parameters from a URL to the view that you want.

AppRoute Controller

The example uses the most straightforward approach to using AppRoute where the method attached to the route is a property of the AppRoute object itself. See the docs to add a controller object to AppRoute were you can group similar routes and their methods together.