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>

<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/x-handlebars-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"
}];

//var search_favourites_view = new FavouriteSearchesView({el: $("#search_container") });

// 1) Create a Search View

// Lets follow the result, we literally just want to create a search view that has an empty div. 
var SearchView = Backbone.View.extend({
    initialize: function() {
        this.render(); // drop the render inside initialize
    },
    render: function() {
        var template = _.template($("#search_template").html(), {}); // the template should just be an attribute on the view shich we dont need right now
        this.$el.html(template); // we get a div for free and thats what we need at this point so need to pass a template in here
        
        // make sure you return the view to enable chaining
    },
    events: { // no need for events at this point, note: should go above the initialize just as a style thing
        "click input[type=button]": "doSearch"
    },
    doSearch: function(event) { // no need for any search stuff just yet
        alert("Search for " + $("#search_input").val());
    }
});

// 2) Create a Search Favourites Select View, this View should have a select tag
var FavouriteSearchesSelectView = Backbone.View.extend({ // Lets stick with the name in comments SearchFavouritesSelectView
    className: 'favourite_searches_select', // following the result above, we dont need a class
    tagName: 'select',
    
    initialize: function() {
        this.render(); // no render inside the initialize
    },
    render: function() {
        var template = _.template($("search_favourites_template").html(), {}); // again, no template required and this would be bound to the view instead of being set as a variables in the render method
        this.$el.html(template); // no need to pass a template in just now
        
        // return the view.
    }
    
});

// 3) Create a Search...