James code-for-coffee

## karma_install.bat
npm install -g karma
npm install -g karma-cli

## gist:3adf9f6ef3d9b1df37df
<html lang="en">
  <head>
    <!-- in Stylesheets, a class can be prefixed with a "." and an ID with a "#" -->
    <style type="text/css">
      /* assign the entire HTML body an ID of "home" */
      #home {
        font-weight: bold;
        font-color: black;
      }
      /* you only need to worry about this "class" */

## gist:44c8b6f756a56cc3e1bf
/**
 * A brief intro to Modern HTML and CSS
 */

<table></table>'s have been replaced by <div></div>'s for body layout. This allows for more flexibility in modern browser
rendering engines (and uses less memory to compute positioning). Tables are now used for data output
(such as charts, grids, raw data, etc).

To style these divs and give them a meaning, there are a variety of HTML styles that can be applied.
These are traditionally stored in an external stylesheet inside of the <head></head> HTML tags, ie:

## ch2-1.js
/* Create namespace objects for each Backbone object type */
App = new Object() || {};
App.Models = new Object() || {};
App.Views = new Object() || {};
App.Routers = new Object() || {};
App.Collections = new Object() || {};

## ch2-2.js
/* use namespace for storage */
App.Models.BaseModel = Backbone.Model.extend({
    defaults: {
        id: 1,
        name: "BaseModel"
    }
});
App.Views.BaseView = Backbone.View.extend({
    el: undefined,
    model: undefined

## ch2-3.js
/* use namespace for storage */
var myModel = new App.Models.BaseModel({
   comment: "Test!"
});
var myView = new App.Views.BaseView({
    el: $('body'),
    model: myModel
});

## ch2-4.js
/* Create namespace objects for each Backbone object type */
App = new Object() || {};
App.Models = new Object() || {};
App.Views = new Object() || {};
App.Routers = new Object() || {};
App.Collections = new Object() || {};
App.ActiveModels = new Object() || {};
App.ActiveViews = new Object() || {};
App.ActiveRouters = new Object() || {};
App.ActiveCollections = new Object() || {};

## ch3-1.js
App = new Object() || {};
App.Models = new Object() || {};
App.Collections = new Object() || {};
App.Views = new Object() || {};

App.Models.TableRow = Backbone.Model.extend({


});

## ch3-table-view.hbs
{{!-- view-table-template --}}
<div class="table-responsive">
    <table class="table">
        <thead>
        {{#each column}}
            {{this}}
        {{/each}}
        </thead>
        <tbody id="{{tbody-id}}" class="{{tbody-class}}">
            {{!-- filled by view-table-row-template --}}

## ch3-table-row-view.hbs
{{!-- view-table-row-template --}}
<tr>
{{#each column}}
    <td>{{this}}</td>
{{/each}}
</tr>
{{!-- end view-table-row-template --}}
	<html lang="en">
	<head>
	<!-- in Stylesheets, a class can be prefixed with a "." and an ID with a "#" -->
	<style type="text/css">
	/* assign the entire HTML body an ID of "home" */
	#home {
	font-weight: bold;
	font-color: black;
	}
	/* you only need to worry about this "class" */
	/**
	* A brief intro to Modern HTML and CSS
	*/

	<table></table>'s have been replaced by <div></div>'s for body layout. This allows for more flexibility in modern browser
	rendering engines (and uses less memory to compute positioning). Tables are now used for data output
	(such as charts, grids, raw data, etc).

	To style these divs and give them a meaning, there are a variety of HTML styles that can be applied.
	These are traditionally stored in an external stylesheet inside of the <head></head> HTML tags, ie:
	/* Create namespace objects for each Backbone object type */
	App = new Object() \|\| {};
	App.Models = new Object() \|\| {};
	App.Views = new Object() \|\| {};
	App.Routers = new Object() \|\| {};
	App.Collections = new Object() \|\| {};
	/* use namespace for storage */
	App.Models.BaseModel = Backbone.Model.extend({
	defaults: {
	id: 1,
	name: "BaseModel"
	}
	});
	App.Views.BaseView = Backbone.View.extend({
	el: undefined,
	model: undefined
	/* use namespace for storage */
	var myModel = new App.Models.BaseModel({
	comment: "Test!"
	});
	var myView = new App.Views.BaseView({
	el: $('body'),
	model: myModel
	});
	{{!-- view-table-template --}}
	<div class="table-responsive">
	<table class="table">
	<thead>
	{{#each column}}
	{{this}}
	{{/each}}
	</thead>
	<tbody id="{{tbody-id}}" class="{{tbody-class}}">
	{{!-- filled by view-table-row-template --}}
	{{!-- view-table-row-template --}}
	<tr>
	{{#each column}}
	<td>{{this}}</td>
	{{/each}}
	</tr>
	{{!-- end view-table-row-template --}}