BB Skeleton

by BratmanDu

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();

// create dummy canned response for favourite searches
var favouritesData = [{
  "id": 1,
  "title": "My favourite search 1"
}, {
  "id": 2,
  "title": "My favourite search 2"
}];

// Create the SearchView
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;
  },
  
	//renders the containing <div> for the view - and calls the 'afterRender' function when it has finished rendering
  render: function() {
  
  this.$el.html(this.template());
  
  //defered onRender to ensure the parent <div> exists so we can put things into it
  setTimeout(this.onRender.bind(this), 0);

	//returns the generated <div> to allow .el to be chained when rendering to the doc body 
  return this;
  },
  
  //the onRender function called when the 'render' function has completed
  onRender: function() {
  	
    // instancing the SearchFavouritesCollection, with the dummy data array passed into it as 'favouritesData'
    this.searchFavouritesCollection = new SearchFavouritesCollection(favouritesData);
    
    // instance the SearchFavouritesSelectView
    this.searchFavouritesSelectView = new SearchFavouritesSelectView({
      collection: this.searchFavouritesCollection
    });
    
    //rendering the instance of the SearchFavouritesSelectView into the html element - rendering the <select> tag
    this.$(this.regions.favourites).html(this.searchFavouritesSelectView.render().el);  
  },
   
  addFavouriteClicked: function(event) {
    event.preventDefault();

    this.searchFavouritesCollection.add({
      id: this.counter,
      title: 'My favourite search ' + this.counter
    });

    this.counter++;
  },
  
  dispose: function(){
  
  	//dispose of the instance
    this.favouriteSearchesViewInstance.dispose();
		
    //remove the...