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">
    <div id="myTemplate">
      <div class="info">
        <div class="lorum"><%= lorum %></div>
       
      </div>
  </div>
</script>

SCSS

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

body {
    padding: 5%;
}

Babel + JSX

console.clear();

var MyModel = Backbone.Model.extend({
	
});

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

/**
var MyView = Backbone.View.extend({
	el : $(".js-app"),
	initialize: function() {
        this.collection = new MyCollection();
        this.collection.fetch();
    },
    render: function() {
        alert("myView: " + this.collection.toJSON());
        this.$el.html(el);
    }
});
	*/
  
  var MyView = Backbone.View.extend({
   el: "ul",
   template: _.template($('#myTemplate').html()),
   render: function() {
   alert("myView: " + this.MyCollection.toJSON());
      _.each(this.MyModel.MyCollection, function(item){
         var myTemplate = this.template(item.toJSON());
         $(this.el).append(myTemplate);
      }, this);
      return this;
   }
});
  
var myView = new MyView();

//var myCollection = new MyCollection(); 
console.log(myCollection);

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