systemist/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <div id="app-container"></div>

  <script type="text/template" data-template-name="index">
    <h1>Blog Title</h1>
  </script>

  <script type="text/template" data-template-name="post-item">
    <a href="#posts/1"><%= title %></a>
  </script>

  <script type="text/template" data-template-name="post-create">
    <button>Create</button>
    <input type="text" placeholder="title">
    <textarea id="" name="" cols="30" rows="10"></textarea>
  </script>

  <script type="text/template" data-template-name="show-post">
    <h1>First Post</h1>
    <p>Cool post body.</p>
    <button>Edit</button>
    <button>Delete</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>

## main.js
(function(){

  var Post = Backbone.Model.extend({
    idAttribute: 'objectId',
    defaults: {
      title: '',
      body: ''
    }
  });

  var PostsCollection = Backbone.Collection.extend({
    model: Post,

    url: "https://api.parse.com/1/classes/Post",

    parse: function(response){
      return response.results;
    }
  });

  // -------------
  // Views / (Presentation / Interation)
  // -------------
  var PostsIndexView = Backbone.View.extend({
    template: _.template($('[data-template-name=index]').text()),

    initialize: function(){
      this.listView = new PostsListView({collection: this.collection});
      this.createView = new PostCreateView();
    },

    render: function(){
      this.$el.html(this.template());

      this.listView.render();
      this.$el.append(this.listView.el);

      this.createView.render();
      this.$el.append(this.createView.el);

      return this;
    }
  });

  var PostsListView = Backbone.View.extend({
    tagName: 'ul',

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

    render: function(){
      this.$el.empty();
      this.renderChildren();
      return this;
    },

    renderChildren: function(){
      this.childViews = this.collection.map(function(post){
        return new PostItemView({model: post});
      });

      var self = this;
      _.each(this.childViews, function(view){
        view.render();
        self.$el.append(view.el);
      });
    }
  });

  var PostItemView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($('[data-template-name=post-item]').text()),

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

  var PostCreateView = Backbone.View.extend({
    tagName: 'form',
    template: _.template($('[data-template-name=post-create]').text()),

    render: function(){
      this.$el.html(this.template());
      return this;
    }
  });

  // -------------
  // Router / Application State
  // -------------
  var AppRouter = Backbone.Router.extend({
    routes: {
      '': 'index',
      'posts/:id': 'showPost'
    },

    initialize: function(){
      this.postsCollection = new PostsCollection();
      this.indexView = new PostsIndexView({
        el: '#app-container',
        collection: this.postsCollection
      });
    },

    index: function(){
      this.postsCollection.fetch();
      this.indexView.render();
    },

    showPost: function(){
      var template = _.template($('[data-template-name=show-post]').text());
      $('#app-container').html(template());
    }
  });

  // -------------
  // Configuration
  // -------------
  $.ajaxSetup({
    headers: {
      "X-Parse-Application-Id": "ZYQHOvrj5oPV8fGAN6M7x6m00ZNLtr5tpd3gzkFi",
      "X-Parse-REST-API-Key": "0BRysAUoHF2WsbkYZh1DOosJS3Oi1uS31KozIKUz"
    }
  });


  // -------------
  // Glue code
  // -------------
  $(document).ready(function(){
    window.router = new AppRouter();
    Backbone.history.start();
  });

})();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>

	<div id="app-container"></div>

	<script type="text/template" data-template-name="index">
	<h1>Blog Title</h1>
	</script>

	<script type="text/template" data-template-name="post-item">
	<a href="#posts/1"><%= title %></a>
	</script>

	<script type="text/template" data-template-name="post-create">
	<button>Create</button>
	<input type="text" placeholder="title">
	<textarea id="" name="" cols="30" rows="10"></textarea>
	</script>

	<script type="text/template" data-template-name="show-post">
	<h1>First Post</h1>
	<p>Cool post body.</p>
	<button>Edit</button>
	<button>Delete</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(){

	var Post = Backbone.Model.extend({
	idAttribute: 'objectId',
	defaults: {
	title: '',
	body: ''
	}
	});

	var PostsCollection = Backbone.Collection.extend({
	model: Post,

	url: "https://api.parse.com/1/classes/Post",

	parse: function(response){
	return response.results;
	}
	});

	// -------------
	// Views / (Presentation / Interation)
	// -------------
	var PostsIndexView = Backbone.View.extend({
	template: _.template($('[data-template-name=index]').text()),

	initialize: function(){
	this.listView = new PostsListView({collection: this.collection});
	this.createView = new PostCreateView();
	},

	render: function(){
	this.$el.html(this.template());

	this.listView.render();
	this.$el.append(this.listView.el);

	this.createView.render();
	this.$el.append(this.createView.el);

	return this;
	}
	});

	var PostsListView = Backbone.View.extend({
	tagName: 'ul',

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

	render: function(){
	this.$el.empty();
	this.renderChildren();
	return this;
	},

	renderChildren: function(){
	this.childViews = this.collection.map(function(post){
	return new PostItemView({model: post});
	});

	var self = this;
	_.each(this.childViews, function(view){
	view.render();
	self.$el.append(view.el);
	});
	}
	});

	var PostItemView = Backbone.View.extend({
	tagName: 'li',
	template: _.template($('[data-template-name=post-item]').text()),

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

	var PostCreateView = Backbone.View.extend({
	tagName: 'form',
	template: _.template($('[data-template-name=post-create]').text()),

	render: function(){
	this.$el.html(this.template());
	return this;
	}
	});

	// -------------
	// Router / Application State
	// -------------
	var AppRouter = Backbone.Router.extend({
	routes: {
	'': 'index',
	'posts/:id': 'showPost'
	},

	initialize: function(){
	this.postsCollection = new PostsCollection();
	this.indexView = new PostsIndexView({
	el: '#app-container',
	collection: this.postsCollection
	});
	},

	index: function(){
	this.postsCollection.fetch();
	this.indexView.render();
	},

	showPost: function(){
	var template = _.template($('[data-template-name=show-post]').text());
	$('#app-container').html(template());
	}
	});

	// -------------
	// Configuration
	// -------------
	$.ajaxSetup({
	headers: {
	"X-Parse-Application-Id": "ZYQHOvrj5oPV8fGAN6M7x6m00ZNLtr5tpd3gzkFi",
	"X-Parse-REST-API-Key": "0BRysAUoHF2WsbkYZh1DOosJS3Oi1uS31KozIKUz"
	}
	});


	// -------------
	// Glue code
	// -------------
	$(document).ready(function(){
	window.router = new AppRouter();
	Backbone.history.start();
	});

	})();