app.js

import _ from 'underscore';
import $ from 'jquery';
import 'jquery-colpick';

import Postit from './models/postit.js';
import PostitNotes from './collections/postit_notes.js';


var postitData = [{
    text: "Backbone is a library not a Framework.",
    color: "#AC1200"
},
{
    text: "That means it doesn't dictate to you how the code is structured",
    color: "#752310"
}];
var myPostitNotes = new PostitNotes(postitData);

var render = function(postit) {
  var template = $("#postit-template");
  var templateObject = _.template(template.html());
  var compiledTemplate = templateObject(postit.toJSON());

  $('#postits').append(compiledTemplate);
};

var getFormData = function() {
  var color = $('#color').val();

  var text = $('#text').val();
  $('#text').val('');

  return {text: text,
          color: color
        };
};

var renderList = function() {
  $('#postits').empty();
  myPostitNotes.each(function(postit) {
    render(postit);
  });
};

$(document).ready(function() {
  console.log("Lets go!");
  myPostitNotes.on("update", renderList);
  renderList();


  $('button.success').click(function() {
    var formData = getFormData();
    var newPostit = new Postit({
        text: formData.text,
        color: formData.color
    });
    myPostitNotes.add(newPostit);
  });

});

// end

postit_notes.js

// postit_notes.js

import Backbone from 'backbone';
import Postit from '../models/postit.js';

const PostitNotes = Backbone.Collection.extend({
  model: Postit
});

export default PostitNotes;