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



<div id="search_container">a</div>

<script type="text/template" id="search_template">
    <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">
    <label>Favourite Searches</label>
</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"
}];


// 1) Create a Search View
var SearchView = Backbone.View.extend({
    initialize: function() {
        
    },
    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({
    tagName: 'select',
    
    render: function() {
       this.$el.html();
       
       SearchFavouritesCollection.each(function(favourite){
       	console.log('fav');
       });
       
       return this;
    }
    
});

// 3) Create a Search Favourites Option View, this View should have an option tag
var SearchFavouritesOptionView = Backbone.View.extend({
   tagName: 'option',
    
   render: function() {
   	this.$el.html();
    return this;
   }
});

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

// 5) Create a Search Favourites Collection that contains the Search Favourite Model
var SearchFavouritesCollection = Backbone.Collection.extend({
    model: SearchFavouriteModel,  
});

// 6) After the Search View renders, instance a Favourites Select View

// Pass an instance of the Favourites Collection into this View consisting of the favouriteData
var favouriteSearches = new SearchFavouritesCollection(favouritesData);

// 7) Render the Search View into the Search View element
var searchView = new SearchView({
    //el: $("#search_container")
    collection: favouriteSearches
});

// 8) Render Search View into the DOM
$('body').html(searchView.render().el);