jacobthemyth · August 29, 2015 14:15
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Tooter</title>
  <link rel="stylesheet" href="styles/main.css">
 </head>
 <body>
  <div class="app-container">
    <form class="js-toot-input">
      <input type="text" class="new-toot js-new-toot" placeholder="What's up?">
    </form>
    <ul class="toots js-toots">
    </ul>
  </div>

  <script type="text/template" id="toot-template">
    <%= body %>
    <button class="js-destroy">X</button>
  </script>

  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/underscore/underscore.js"></script>
  <script src="bower_components/backbone/backbone.js"></script>

  <script src="main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
 (function(){
  window.App = window.App || {};

  var AppModel = Backbone.Model.extend({
    defaults: {
      username: 'jacobsmith'
    }
  });

  var Toot = Backbone.Model.extend({
    idAttribute: "_id",

    defaults: function(attributes){
      attributes = attributes || {};
      return _.defaults(attributes, {
        body: '',
        username: '<no user>',
        timestamp: (new Date()).toString()
      });
    }
  });

  var TootsCollection = Backbone.Collection.extend({
    url: 'http://tiny-pizza-server.herokuapp.com/collections/toots',
    model: Toot,

    comparator: 'timestamp'
  });

  var TootInputView = Backbone.View.extend({
    el: '.js-toot-input',

    events: {
      'submit': 'createToot'
    },

    createToot: function(event){
      event.preventDefault();
      var body = this.$('.js-new-toot').val();
      var username = App.router.appModel.get('username');
      this.collection.create({body: body, username: username});
      this.$('.js-new-toot').val('');
    }
  });

  var TootItemView = Backbone.View.extend({
    tagName: 'li',
    className: 'toot',
    template: _.template($('#toot-template').text()),

    events: {
      'click .js-destroy': 'destroyToot',
      'click .js-edit': 'editToot',
    },

    render: function(){
      this.$el.html( this.template( this.model.toJSON() ) );
    },

    destroyToot: function(){
      this.model.destroy();
    },

    editToot: function(){
      var editable = this.$('.js-body').attr('contenteditable') == 'true';
      if(editable) {
        this.$('.js-body').attr('contenteditable', 'false');
        this.model.set('body', this.$('.js-body').text() );
        this.model.save();
      } else {
        this.$('.js-body').attr('contenteditable', 'true');
      }
    }
  });

  var TootsListView = Backbone.View.extend({
    el: '.js-toots',

    initialize: function(){
      this.listenTo(this.collection, 'destroy sync', this.render);
    },

    render: function(){
      var self = this;

      this.$el.empty();

      this.collection.each(function(toot){
        var itemView = new TootItemView({model: toot});
        itemView.render();
        self.$el.append(itemView.el);
      });

      return this;
    }
  });

  var AppRouter = Backbone.Router.extend({
    routes: {
      '': 'index'
    },

    initialize: function(){
      this.appModel = new AppModel();
      this.toots = new TootsCollection();
      this.tootsList = new TootsListView({collection: this.toots});
      this.tootInput = new TootInputView({collection: this.toots});
    },

    index: function(){
      this.toots.fetch();
    }
  });

  $(document).ready(function(){
    App.router = new AppRouter();
    Backbone.history.start();
  });

 })();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Tooter</title>
	<link rel="stylesheet" href="styles/main.css">
	</head>
	<body>
	<div class="app-container">
	<form class="js-toot-input">
	<input type="text" class="new-toot js-new-toot" placeholder="What's up?">
	</form>
	<ul class="toots js-toots">
	</ul>
	</div>

	<script type="text/template" id="toot-template">
	<%= body %>
	<button class="js-destroy">X</button>
	</script>

	<script src="bower_components/jquery/dist/jquery.js"></script>
	<script src="bower_components/underscore/underscore.js"></script>
	<script src="bower_components/backbone/backbone.js"></script>

	<script src="main.js"></script>
	</body>
	</html>
	(function(){
	window.App = window.App \|\| {};

	var AppModel = Backbone.Model.extend({
	defaults: {
	username: 'jacobsmith'
	}
	});

	var Toot = Backbone.Model.extend({
	idAttribute: "_id",

	defaults: function(attributes){
	attributes = attributes \|\| {};
	return _.defaults(attributes, {
	body: '',
	username: '<no user>',
	timestamp: (new Date()).toString()
	});
	}
	});

	var TootsCollection = Backbone.Collection.extend({
	url: 'http://tiny-pizza-server.herokuapp.com/collections/toots',
	model: Toot,

	comparator: 'timestamp'
	});

	var TootInputView = Backbone.View.extend({
	el: '.js-toot-input',

	events: {
	'submit': 'createToot'
	},

	createToot: function(event){
	event.preventDefault();
	var body = this.$('.js-new-toot').val();
	var username = App.router.appModel.get('username');
	this.collection.create({body: body, username: username});
	this.$('.js-new-toot').val('');
	}
	});

	var TootItemView = Backbone.View.extend({
	tagName: 'li',
	className: 'toot',
	template: _.template($('#toot-template').text()),

	events: {
	'click .js-destroy': 'destroyToot',
	'click .js-edit': 'editToot',
	},

	render: function(){
	this.$el.html( this.template( this.model.toJSON() ) );
	},

	destroyToot: function(){
	this.model.destroy();
	},

	editToot: function(){
	var editable = this.$('.js-body').attr('contenteditable') == 'true';
	if(editable) {
	this.$('.js-body').attr('contenteditable', 'false');
	this.model.set('body', this.$('.js-body').text() );
	this.model.save();
	} else {
	this.$('.js-body').attr('contenteditable', 'true');
	}
	}
	});

	var TootsListView = Backbone.View.extend({
	el: '.js-toots',

	initialize: function(){
	this.listenTo(this.collection, 'destroy sync', this.render);
	},

	render: function(){
	var self = this;

	this.$el.empty();

	this.collection.each(function(toot){
	var itemView = new TootItemView({model: toot});
	itemView.render();
	self.$el.append(itemView.el);
	});

	return this;
	}
	});

	var AppRouter = Backbone.Router.extend({
	routes: {
	'': 'index'
	},

	initialize: function(){
	this.appModel = new AppModel();
	this.toots = new TootsCollection();
	this.tootsList = new TootsListView({collection: this.toots});
	this.tootInput = new TootInputView({collection: this.toots});
	},

	index: function(){
	this.toots.fetch();
	}
	});

	$(document).ready(function(){
	App.router = new AppRouter();
	Backbone.history.start();
	});

	})();