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

  render: function() {
    this.$el.html();
    _.defer(function() {
      this.afterRender();
    }.bind(this));

    return this;
  },
  afterRender: function() {
  	// what are you passing into this favourites view and where should it be instanced?
  
    var favouriteSearchesViewInstance = new SearchFavouritesSelectView({
      collection: favouriteSearches
    }); // we need to get this view rendered into this views element
  }
});

// 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() {
  	// think about where you set these in the card view the other day and what you accessed.
    this.$el.attr('value', favouritesData("id")); // missing a closing brace
    this.$el.attr('tagName', tagName); // tagName is already set ^^
    this.$el.attr('text',...