timruffles/app.js

## app.js
console.log("Backbone, jQuery, underscore",!!Backbone,!!jQuery,!!_);


var RedditStories = Backbone.Collection.extend({
  sync: redditSync
});

var AppRouter = Backbone.Router.extend({
  routes: {
    "": "root",
    "story/:title": "story",
    "*unknownPath": "unknown"
  }
});

var RedditStoriesView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.collection,"add remove reset",this.render,this);
  },
  tagName: "ul",
  template: _.template(
    "<% collection.each(function(story) { %>" +
      "<li><a href='#story/<%= story.get('title') %>'><%= story.get('title') %></a>" +
    "<% }); %>"
  ),
  render: function() {
    this.$el.html(this.template(this));
  }
});

var StoryView = Backbone.View.extend({
  initialize: function() {
  },
  tagName: "article",
  template: _.template(
    "<h1><%= model.get('title') %></h1>" +
    "<h2><%= model.get('score') %></h2>"
  ),
  render: function() {
    this.$el.html(this.template(this));
  }
});

var AppView = Backbone.View.extend({
  initialize: function(opts) {
    this.router = opts.router;
    this.router.on("route:root",this.home,this);
    this.router.on("route:story",this.showStory,this);
    this.router.on("route:unknown",this.fourOhFour,this);
    this.currentView;
    this.stories = new RedditStories;
    this.stories.subreddit = "javascript";
  },
  home: function() {
    var view = new RedditStoriesView({
      collection: this.stories
    });
    view.collection.fetch();
    this.switchView(view);
  },
  switchView: function(view) {
    if(this.currentView) this.currentView.remove();
    view.render();
    this.currentView = view;
    this.$(".stage").append(this.currentView.el);
  },
  showStory: function(title) {
    var view = new StoryView({
      model: this.stories.findWhere({title: title})
    });
    this.switchView(view);
  },
  fourOhFour: function() {
    this.$(".stage").html("wtf?!");
  }
});


main();

function main() {
  var router = new AppRouter;
  var view = new AppView({
    el: document.getElementById("app"),
    router: router
  });
  Backbone.history.start();
}


function redditSync(method,model,options) {
  if(method !== "read") throw new Error("Read only");
  $.ajax({
    dataType: "jsonp",
    jsonp: "jsonp",
    url: "http://www.reddit.com/r/" + model.subreddit + ".json",
    success: function(data) {
      // format data
      var formatted = _.pluck(data.data.children,"data");
      options.success(formatted);
    }
  })
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Blank Backbone App</title>
    <link rel="stylesheet" href="app.css" type="text/css" media="screen" charset="utf-8">
  </head>
  <body>

    <div id=app>
      <nav>
        <a href="#">Home</a>
        <a href="#story/learning-bb">Learning Backbone!</a>
      </nav>
      <div class=stage></div>
    </div>


    <script src="../../libs/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../libs/underscore.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../libs/backbone.js" type="text/javascript" charset="utf-8"></script>

    <script src="app.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>
	console.log("Backbone, jQuery, underscore",!!Backbone,!!jQuery,!!_);


	var RedditStories = Backbone.Collection.extend({
	sync: redditSync
	});

	var AppRouter = Backbone.Router.extend({
	routes: {
	"": "root",
	"story/:title": "story",
	"*unknownPath": "unknown"
	}
	});

	var RedditStoriesView = Backbone.View.extend({
	initialize: function() {
	this.listenTo(this.collection,"add remove reset",this.render,this);
	},
	tagName: "ul",
	template: _.template(
	"<% collection.each(function(story) { %>" +
	"<li><a href='#story/<%= story.get('title') %>'><%= story.get('title') %></a>" +
	"<% }); %>"
	),
	render: function() {
	this.$el.html(this.template(this));
	}
	});

	var StoryView = Backbone.View.extend({
	initialize: function() {
	},
	tagName: "article",
	template: _.template(
	"<h1><%= model.get('title') %></h1>" +
	"<h2><%= model.get('score') %></h2>"
	),
	render: function() {
	this.$el.html(this.template(this));
	}
	});

	var AppView = Backbone.View.extend({
	initialize: function(opts) {
	this.router = opts.router;
	this.router.on("route:root",this.home,this);
	this.router.on("route:story",this.showStory,this);
	this.router.on("route:unknown",this.fourOhFour,this);
	this.currentView;
	this.stories = new RedditStories;
	this.stories.subreddit = "javascript";
	},
	home: function() {
	var view = new RedditStoriesView({
	collection: this.stories
	});
	view.collection.fetch();
	this.switchView(view);
	},
	switchView: function(view) {
	if(this.currentView) this.currentView.remove();
	view.render();
	this.currentView = view;
	this.$(".stage").append(this.currentView.el);
	},
	showStory: function(title) {
	var view = new StoryView({
	model: this.stories.findWhere({title: title})
	});
	this.switchView(view);
	},
	fourOhFour: function() {
	this.$(".stage").html("wtf?!");
	}
	});


	main();

	function main() {
	var router = new AppRouter;
	var view = new AppView({
	el: document.getElementById("app"),
	router: router
	});
	Backbone.history.start();
	}


	function redditSync(method,model,options) {
	if(method !== "read") throw new Error("Read only");
	$.ajax({
	dataType: "jsonp",
	jsonp: "jsonp",
	url: "http://www.reddit.com/r/" + model.subreddit + ".json",
	success: function(data) {
	// format data
	var formatted = _.pluck(data.data.children,"data");
	options.success(formatted);
	}
	})
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Blank Backbone App</title>
	<link rel="stylesheet" href="app.css" type="text/css" media="screen" charset="utf-8">
	</head>
	<body>

	<div id=app>
	<nav>
	<a href="#">Home</a>
	<a href="#story/learning-bb">Learning Backbone!</a>
	</nav>
	<div class=stage></div>
	</div>


	<script src="../../libs/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../libs/underscore.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../libs/backbone.js" type="text/javascript" charset="utf-8"></script>

	<script src="app.js" type="text/javascript" charset="utf-8"></script>
	</body>
	</html>