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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<div class="js-app">
    <!-- Example List -->
    <ul>
        <li>
            <p>lorem</p>
            <p>ipsum</p>
            <p>dolar</p>
            <p>sit</p>
        </li>
    </ul>
    <!-- // -->
</div>

<script type="text/template" id="myTemplate">
   <p><%= lorem %></p>
   <p><%= ipsum %></p>
   <p><%= dolar %></p>
   <p><%= sit %></p>
</script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

li {
  list-style: none;
}

Babel + JSX

console.clear();

/**
need:

	1. a model (to hold the data from each json object - like a row of a table)
  
  2. a collection (to hold the models - like a table)
  
  3. a collection view (to be the view of the whole table)
  
  4. a collection item view (to be the view of each object or row of the table)
  
  5. instance the collection into the markup  

** prev: on 'sync' of myCollection, and listener on init of collection view to call render method on collection sync
** up next: inject collection data as markup into teplate
*/

//creating model
var MyModel = Backbone.Model.extend();

//creating collection, using the model above and the url of the JSON data
var MyCollection = Backbone.Collection.extend({
    model: MyModel,
    url: 'https://api.myjson.com/bins/18zq8'
});

//creating collection view
var MyCollectionView = Backbone.View.extend({
	
  //regions to define part of the page we will render markup into
  regions: {
  	renderArea: '.js-app'
  },  
  
  //tag name for this view is ul
  tagName: 'ul',
 
  initialize: function(){
    //create document fragment which will hold the markup
    this.fragment = document.createDocumentFragment();
  	
    //listener to call render method when collection fetch has synced
    this.listenTo(this.collection, 'sync', this.render, this);
    
    //call the render function of this view
    this.render();
  },
   
  render: function(){
  	//for each collection item, call the addItem function and pass in 'this' as a reference to the current model in the loop
    this.collection.forEach(this.addItem, this);
    
    //this.fragment is appended to this.el - the ul
    //this.fragment had itemView.render().el (the li elements using template and data) appended as children in the addItem function
    $(this.el).append(this.fragment);
    
    //replace the renderArea markup with the contents of this.el, which is the ul tag, with the fragment containing the li elements appended to it
   ...