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>
<!-- 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() {
    var favouriteSearchesViewInstance = new SearchFavouritesSelectView({
      collection: favouriteSearches
    });
    var favouriteSearches = new SearchFavouritesCollection(favouritesData); // this needs to live where you are instancing the view that uses it
  }
});

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