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/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<!--
    Result:
    
    <div>
        <select>
            <option value="1">My favourite search 1</option>
            <option value="2">My favourite search 2</option>
        </select>
    </div>
-->

<script type="text/x-handlebars-template" class="tmpl-search">
    <div class="js-region--favourites"></div>
    <button class="js-action--add-favourite">Add a favourite</button>
</script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

JavaScript

console.clear();

var favouritesData = [{
    "id": 1,
    "title": "My favourite search 1"
}, {
    "id": 2,
    "title": "My favourite search 2"
}];


/**
 *	Favourite Search Todos
 *	- Make a request for saved searches - getFavouriteSearches
 *	- Add a save button
 *		- Click save: spin up save view with input and submit button
 *	- Check new saved favourite name against favourites collection names as validation
 */

var SearchView = Backbone.View.extend({

	template: Handlebars.compile( $('.tmpl-search').html() ),
    
    events: {
    	'click .js-action--add-favourite': 'addFavouriteClicked'
    },

	regions: {
    	'favourites': '.js-region--favourites'
    },
    
    initialize: function() {
    	this.counter = 3;
    },

    render: function() {
        this.$el.html(this.template());
        
        setTimeout(this.onRender.bind(this), 0);
        
        return this;
    },
    
    onRender: function() {
		this.searchFavouritesCollection = new SearchFavouritesCollection(favouritesData);
    
		this.searchFavouritesSelectView = new SearchFavouritesSelectView({
            collection: this.searchFavouritesCollection
        });
        
        this.$(this.regions.favourites).html(this.searchFavouritesSelectView.render().el);
        
        // Fetch the favourites
    },
    
    addFavouriteClicked: function(event) {
    	event.preventDefault();
        
        this.searchFavouritesCollection.add({
        	id: this.counter,
            title: 'My favourite search ' + this.counter
        });
        
        this.counter++;
    },
    
    dispose: function() {
    	this.searchFavouritesSelectView.dispose();
    	this.remove();
    }
});

var SearchFavouritesSelectView = Backbone.View.extend({

    tagName: 'select',
    
    isRendered: false,
    
    initialize: function() {
    	this.fragment = document.createDocumentFragment();
        
        // Listen for the favourites coming from request and rerender.
        // Listen for additional...