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>
-->

SCSS

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

body {
    padding: 5%;
}

JavaScript

console.clear();

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

// Create a SearchFavouriteModel
var SearchFavouriteModel = Backbone.Model.extend(); 

// Create the SearchFavouritesCollection that uses the SearchFavouriteModel
var SearchFavouritesCollection = Backbone.Collection.extend({ 
  model: SearchFavouriteModel,
});

// Create the SearchView
var SearchView = Backbone.View.extend({

	//renders the containing <div> for the view - and calls the 'afterRender' function when it has finished rendering
  render: function() {
    this.$el.html();
    _.defer(function() {
      this.afterRender();
    }.bind(this));
	
  	//returns ??
    return this;
  },
  
  //the afterRender function called when the 'render' function has completed
  afterRender: function() {
  	
    // instancing the SearchFavouritesCollection, with the dummy data array passed into it as 'favouritesData'
    var favouriteSearches = new SearchFavouritesCollection(favouritesData);   
    
    // instance the SearchFavouritesSelectView
    var favouriteSearchesViewInstance = new SearchFavouritesSelectView({
      collection: favouriteSearches 
    });
    
    //rendering the instance of the SearchFavouritesSelectView into the html element - rendering the <select> tag
    this.$el.html(favouriteSearchesViewInstance.render().el);  
    
    //returns ??
    return this;
  }
});

// Create a Search Favourites Select View, this View should have a select tag, and will pull in the dummy array using the SearchFavouritesOptionView
var SearchFavouritesSelectView = Backbone.View.extend({ 

  //this view will create the <select> tag, and is instanced and rendered in the 'afterRender' of the SearchView
  tagName: 'select',

	// the render function for this view
  render: function() {
		//console.log(this.collection);
  	
    // for each object in the collection passed to this view from...