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></p>
</script>

SCSS

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

body {
    padding: 5%;
}

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  

*/

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

//collection
var MyCollection = Backbone.Collection.extend({
    model: MyModel,
    url: 'https://api.myjson.com/bins/18zq8',
});

//collection view
var MyCollectionView = Backbone.View.extend({
	tagName: 'ul',
  
  initialize: function(){
  	this.collection = new MyCollection();
    this.collection.fetch();
  },
  
  render: function(){
  	this.collection.each(function(MyModel){
    	var myCollectionItemView = new MyCollectionItemView({ 
      	model: MyModel
      });
      this.$el.append(myCollectionItemView.render().el);
    }, this);
    return this;
  }
});

//collection item view
var MyCollectionItemView = Backbone.View.extend({
	tagName: 'li',  
  template: _.template($('#myTemplate').html()),
    
  render: function() {
  	this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

var myCollection = new MyCollection();

var myCollectionView = new MyCollectionView({collection: myCollection});

$('.js-app').append(myCollectionView.render().el);

/**
 * Use https://api.myjson.com/bins/18zq8 json endpoint to make a
 * collection of views structured like current example list in .js-app
 *
 * <ul>
 *     <li>
 *         <p>lorem</p>
 *         <p>ipsum</p>
 *         <p>dolar</p>
 *         <p>sit</p>
 *     </li>
 * </ul>
 */