BB: Model collection nesting

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script type="text/x-handlebars-template" class="tmpl-firm-search">
    <div class="grid__col-xs-12 grid__col-sm-12 grid__col-md-12 grid__col-lg-6">
        <label for="firm">Firm</label>
        <select class="js-input" name="firm" id="firm">
        	{{#each payload}}
            	<option value="{{this.id}}" {{selectFirstOption @index}}>{{this.id}}</option>
            {{/each}}
        </select>
    </div>
    
    <div class="grid__col-xs-12 grid__col-sm-12 grid__col-md-12 grid__col-lg-6 js-sessions">
        <label for="sessionId">Session ID</label>
        <!--<select class="js-input" name="sessionId" id="sessionId">
        	<option value="All" checked>All</option>
        	{{#each sessions}}
            	<option value="{{this}}">{{this}}</option>
            {{/each}}
        </select>-->
    </div>
	
    <!-- If account array is empty then output input -->
    <div class="grid__col-xs-12 grid__col-sm-12 grid__col-md-12 grid__col-lg-6">
        <label for="account">Accounts</label>
        
        <!--{{#if accountRestrs.length}}
            <select class="js-input" name="account" id="account">
                {{#each accountRestrs}}
                    <option value="{{this}}">{{this}}</option>
                {{/each}}
            </select>
        {{else}}
        	<input class="js-input" maxlength="10" name="account" type="text">
        {{/if}}-->
    </div>

    <div class="grid__col-xs-12 grid__col-sm-12 grid__col-md-12 grid__col-lg-6">
        <label for="tag50">Tag 50</label>
        <!--<select class="js-input" name="tag50" id="tag50">
        	{{#each...

SCSS

* {
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

body {
    padding: 5%;
}

.grid__col-xs-12 {
    margin: 20px 0;
}

JavaScript

console.clear();

// Helpers
Handlebars.registerHelper('selectFirstOption', function (index) {
    return index === 0 ? 'selected' : '';
});

/**
 *	✓ Todos
 *	1. Add in error handling region
 *	2. Toggle first model
 *	3. Split out select areas that need to be populated into individual
 *	views that listen for the one model
 */

var data = {
	"status": "success",
    "payload": {
        "020": {
            "sessions": ["SES1", "SES2", "SES3", "SES4"],
            "accountRestrs": [],
            "tag50Restrs": []
        },
        "650": {
            "sessions": ["SES11", "SES12", "SES13"],
            "accountRestrs": ["ACCT1", "ACC2", "ACC3"],
            "tag50Restrs": []
        },
        "880": {
            "sessions": ["SES900", "SES901"],
            "accountRestrs": ["abc", "DEF"],
            "tag50Restrs": ["TAG5", "TAG53"]
        }
    }
};

var SearchFormModel = Backbone.Model.extend({
	defaults: {
    	sessionId: 'All',
        side: 'All',
        price: ''
    },
    
	initialize: function() {
    	
        this.firmsCollection = new FirmsCollection(this.get('payload'), {parse: true});
    }
});

var FirmsCollection = Backbone.Collection.extend({
    parse: function(response) {
    	var models = [];
        
        _.each(response, function(value, key) {
        	value.id = key;
        	models.push(new Backbone.Model(value))
        });
        
        return models;
    }
});

var SearchFormView = Backbone.View.extend({

	currentlyActiveInputs: null,

	regions: {
    	inputs: '.js-regions--search-field'
    },

	events: {
    	'change select[name=firm]': 'firmSelected',
        'click .js-action--order-search': 'searchActionClicked'
    },

	template: Handlebars.compile($('.tmpl-firm-search').html()),
    
    initialize: function() {
    	this.listenTo(this.model, 'change', this.onModelSet, this);
    },
    
    render: function() {
    	this.$el.html(this.template(this.model.toJSON()));
        
        setTimeout(function() {
      ...