Add in main files

.gitignore

@@ -0,0 +1,2 @@
+/.anvil
+/.sass-cache

build.json

@@ -0,0 +1,23 @@
+{
+    "anvil.cdnjs": {
+        "output": "src/js/vendor/",
+        "libs": {
+            "knockout": {
+                "version": "2.2.1",
+                "url": "http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"
+            }
+        }
+    },
+    "httpPaths": {
+    	"/": "./lib"
+    },
+    "anvil.compass": {
+        "config_file": "compass.rb"
+    },
+    "anvil.testem": {
+	    "launch": "Chrome",
+	    "test_page": "spec/index.html",
+	    "framework": "mocha"
+	},
+	"dependencies": [ "anvil.testem", "anvil.cdnjs", "anvil.compass" ]
+}

compass.rb

@@ -0,0 +1,9 @@
+line_comments = true
+output_style = :expanded
+relative_assets = true
+sass_dir = 'src/sass'
+css_dir  = 'lib/css'
+javascripts_dir = 'src/js'
+images_dir = 'src/img'
+generated_images_dir = 'lib/img'
+sass_options = { :debug_info => true }

config.rb

@@ -0,0 +1,9 @@
+line_comments = true
+output_style = :expanded
+relative_assets = true
+sass_dir = 'src/sass'
+css_dir  = 'lib/css'
+javascripts_dir = 'src/js'
+images_dir = 'src/img'
+generated_images_dir = 'lib/img'
+sass_options = { :debug_info => true }

lib/css/ie.css

@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */

lib/css/print.css

@@ -0,0 +1,3 @@
+/* Welcome to Compass. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

lib/css/screen.css

@@ -0,0 +1,68 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000317}}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000320}}
+body {
+  line-height: 1;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000322}}
+ol, ul {
+  list-style: none;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000324}}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000326}}
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000328}}
+q, blockquote {
+  quotes: none;
+}
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\00003101}}
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000330}}
+a img {
+  border: none;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\00003114}}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+  display: block;
+}

lib/css/styles.css

@@ -0,0 +1,71 @@
+/* Welcome to Compass. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000317}}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000320}}
+body {
+  line-height: 1;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000322}}
+ol, ul {
+  list-style: none;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000324}}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000326}}
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000328}}
+q, blockquote {
+  quotes: none;
+}
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\00003101}}
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\0000330}}
+a img {
+  border: none;
+}
+
+@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/Ruby193\/lib\/ruby\/gems\/1\.9\.1\/gems\/compass-0\.12\.1\/frameworks\/compass\/stylesheets\/compass\/reset\/_utilities\.scss}line{font-family:\00003114}}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+  display: block;
+}

lib/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>KnockoutJS Demo</title>
+
+    <link rel="shortcut icon" href="/favicon.ico">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+
+	<ul data-bind="foreach: beers">
+		<li data-bind="text: name"></li>
+	</ul>
+
+	<!-- import("templates/list.html") -->
+
+	<script src="js/require-jquery.js" data-main="js/main"></script>
+</body>
+</html>

lib/js/app.js

@@ -0,0 +1,38 @@
+define( [ "underscore", "jquery", "postal", "shared/resources" ], function( _, $, postal, Resources ) {
+	postal.addWireTap(function( d, e ) {
+		console.log( JSON.stringify( e ) );
+	});
+
+	var App = function( options ) {
+		options = options || {};
+
+		this.resources = options.resources || new Resources();
+		this.channels = {};
+
+		this.initialize();
+	};
+
+	_.extend(App.prototype, {
+		initialize: function() {
+			this.setupChannels();
+			this.setupSubscriptions();
+
+			this.channels.data.publish( "beers.fetch", {
+				url: "http://api.openbeerdatabase.com/v1/beers.json",
+				successReplyTo: "beers.fetched"
+			});
+		},
+		ready: function( data ) {
+			this.channel.publish( "ready" );
+		},
+		setupChannels: function() {
+			this.channel = postal.channel( "app" );
+			this.channels.data = postal.channel( "data" );
+		},
+		setupSubscriptions: function() {
+			this.channels.data.subsribe( "beers.fetched", this.ready ).withContext( this );
+		}
+	});
+
+	return new App();
+});

lib/js/main.js

@@ -0,0 +1,23 @@
+require.config({
+	paths: {
+		ko: "vendor/knockout-min",
+		postal: "vendor/postal",
+		underscore: "vendor/underscore-min"
+	},
+	shim: {
+		ko: {
+			exports: "ko"
+		},
+        underscore: {
+            exports: "_"
+        }
+	},
+	baseUrl: "/js"
+});
+
+if ( !window.mocha ) {
+	require( [ "app", "postal" ], function( app, postal ) {
+		window.app = app;
+		window.postal = postal;
+	});
+}

lib/js/models/baseViewModel.js

@@ -0,0 +1,32 @@
+define( [ "underscore", "ko" ], function( _, ko ) {
+	var BaseViewModel = function( options ) {
+		this._setup( options );
+
+		this.initialize.call( this, options );
+	};
+
+	_.extend( BaseViewModel.prototype, {
+		_setup: function( options ) {
+			var prop;
+
+			options = options || {};
+
+			for( prop in this ) {
+				if ( this.hasOwnProperty( prop ) ) {
+					if ( options[ prop ] ) {
+						this[ prop ] = _.isArray( options[ prop ] ) ?
+							ko.observableArray( options[ prop ] ) :
+							ko.observable( options[ prop ] );
+					}
+					else {
+						this[ prop ] = _.isArray( this[ prop ] ) ?
+							ko.observableArray( this[ prop ] ) :
+							ko.observable( this[ prop ] );
+					}
+				}
+			}
+		}
+	});
+
+	return BaseViewModel;
+});

lib/js/models/beer.js

@@ -0,0 +1,26 @@
+define( [ "underscore", "ko" ], function( _, ko ) {
+	var Beer = function( options ) {
+		this.id = 0;
+		this.name = null;
+		this.description = null;
+		this.abv = null;
+		this.created_at = null;
+		this.updated_at = null;
+	};
+
+	return Beer;
+});
+
+
+var beer = {
+	id: 55,
+	name: "Old Numbskull",
+	description: "A West Coast style barleywine. Aroma starts with toasty, caramel notes and a pleasant hop character. Color is deep amber, with tan head and impressive 'Brussels Lace' that clings to the sides of the glass.",
+	abv: 11,
+	created_at: "2011-05-29T03:25:05Z",
+	updated_at: "2011-05-29T03:25:05Z",
+	brewery: {
+		id: 7,
+		name: "AleSmith"
+	}
+};