BB Skeleton

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="js-regions--search-field"></div>
    
    <div class="grid">
        <div class="grid__col-xs-12 grid__col-sm-6 grid__col-md-6 grid__col-lg-6">
            <!--<button class="btn btn btn--secondary  js-action--reset-form" type="reset">Reset</button>-->
        </div>
        <div class="grid__col-xs-12 grid__col-sm-6 grid__col-md-6 grid__col-lg-6">
            <button class="btn  js-action--order-search">Search for orders</button>
        </div>
    </div>
</script>

<script type="text/x-handlebars-template" class="tmpl-search-fields">
	<div class="grid__col-xs-12 grid__col-sm-12 grid__col-md-12 grid__col-lg-6">
        <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}}
           ...

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. ✓ Just output the form.
 *	2. ✓ Select a firm, get the id in the search collection
 */

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()));
        return this;
    },
    
    firmSelected: function(event) {		
        var selectedFirmModel =...