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

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

    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.collection.forEach(this.addFavourite, this);
        this.$el.html();

        return this;
    },

    addFavourite: function(favourite) {
        var searchFavouritesOptionView = new SearchFavouritesOptionView({
            model: favourite
        });
        this.$el.prepend(searchFavouritesOptionView.render().el);
        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.attr('value', favouritesData("id"); this.$el.attr('tagName', tagName); this.$el.attr('text', favouritesData("title"));

                    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({ //...