Backbone sample environment

by BrianGenisio

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<div id="paper_sections"></div>

JavaScript

PaperSection = Backbone.Model.extend({
  defaults: {
    title: '',
    position: ''
  },

  initialize: function(){

  },

  renderView: function(){
    return "<li>"+this.get('title')+", Position: "+this.get('position')+"</li>"
  }
});


PaperSectionsList = Backbone.Collection.extend({
  model: PaperSection,
  url: '/admin/paper/section/list.html',
  size: 6,
  initialize: function(){
    this.add(new PaperSection({
      id:1,
      title: "Hello World",
      position:1
    }));
  },

  comparator: function(section){
    return section.get('position');
  },

  renderView: function(){
    var html = "<ul>";
    this.each(function(section){
        console.log(section);
      html += section.renderView();
    });
    if(_.size(this.models) < this.size){
      html+="<li><a href='#add_section' class='btn btn-success btn-small' id='add_section'>Add Section</a></li>"
    }
    html+="</ul>";
    return html;
  }
});

PaperSectionView = Backbone.View.extend({
  initialize: function(){
  },

  render: function(){
    console.log(this.collection.get(1));
    var html = this.collection.renderView();
      
    console.log("html", html);
    console.log("this", this);      
      
    this.$el.html(html);
  }
});

var paper_sections = new PaperSectionsList();

var section_view = new PaperSectionView({
  collection: paper_sections,
  el: $('#paper_sections')
});

section_view.render();