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



<div id="search_container">a</div> <!-- Dont think we need this? -->

<script type="text/template" id="search_template"> <!-- Dont think we need this? -->
    <label>Search</label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>

<script type="text/template" id="search_favourites_template" class="tmpl_search_view"> <!-- Dont think we need this? -->
    <label>Favourite Searches</label>
</script>

SCSS

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

body {
    padding: 5%;
}

JavaScript

console.clear();

// One really important thing, get your spacing and line breaks all nice and neat, also flesh out each of the comments for each class etc to explain what is going on (important for you to really digest this).

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


// 1) Create a Search View
var SearchView = Backbone.View.extend({
    initialize: function() { // do you need an intialize method right now?
        
    },
    render: function() {
        this.$el.html();
        _.defer(function() {
        	this.afterRender();
        }.bind(this));
            
        return this;
    },
    afterRender: function() {
    	var favouriteSearchesViewInstance = new SearchFavouritesSelectView({
				collection: favouriteSearches
			});
    }
});

// 2) Create a Search Favourites Select View, this View should have a select tag
var SearchFavouritesSelectView = Backbone.View.extend({ // Check MarketDataCollectionView
    tagName: 'select',
    
    render: function() {
       this.$el.html();
       
       SearchFavouritesCollection.each(function(favourite){ // views are agnostic of other classes, you work with the collection passed through via the instaniation. 
       	console.log('fav');
       });
       
       return this;
    }
    
});

// 3) Create a Search Favourites Option View, this View should have an option tag
var SearchFavouritesOptionView = Backbone.View.extend({ // So you are going to want to set the value and the title on this option something similar to the way you set the data attributes on the cards.
   tagName: 'option',
    
   render: function() {
   	this.$el.html();
    return this;
   }
});

// 4) Create a Search Favourite Model
var SearchFavouriteModel = Backbone.Model.extend(); // this is grand

// 5) Create a Search Favourites Collection that contains the Search Favourite Model
var SearchFavouritesCollection = Backbone.Collection.extend({ //...