nekman/app.config.js

## app.config.js
require({
  paths: {
    jquery: '//code.jquery.com/jquery-2.0.3.min',
    lodash: '//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash',
    backbone: '//cdn.jsdelivr.net/backbonejs/1.0.0/backbone-min',
    handlebars: '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min',
    listjs: '//cdnjs.cloudflare.com/ajax/libs/list.js/1.0.2/list.min'
  },

  shim: {
    backbone: {
      deps: ['jquery', 'lodash'],
      exports: 'Backbone'
    },

    handlebars: {
      exports: 'Handlebars'
    },

    lodash: {
      exports: '_'
    }
  }

}, ['app'], function(app) {
  app.start();
});

## app.js
/**
 * Quick and dirty "proof of concept" hack for displaying
 * a spreedsheet from Google Docs...with automatic syncing
 * that gets paused if the user moves the mouse/types in the input field.
 * The polling could also be turned on/off, by pressing the poll button.
 *
 * Uses:
 *   > Require.js
 *   > LoDash
 *   > Backbone.js
 *   > Handlebars.js (template)
 *   > List.js (sorting and filtering)
 *   > jQuery 2.0.3
 *
 * Needs some refactoring...
 *
 */
define([
  'jquery',
  './models/SpreedSheetModel',
  './views/SpreedSheetView'
],
function($, SpreedSheetModel, SpreedSheetView) {
  'use strict';

  var setup = function() {
    var parts = window.location.hash.substr(1).split('/'),

    modelOptions = {
      key:  parts[0] || 'o13394135408524254648.240766968415752635',
      name: unescape(parts[1] || 'No name')
    };

    new SpreedSheetView({
      poll: parts[2],
      // Adds CSS-class to cells with '1'/'0' values ... could of course be removed
      cssConverter: {
        '1': 'alert alert-success',
        '0': 'alert alert-danger'
      },
      // Replace '1'/'0' values to 'Done/Missing'... could of course be removed
      valueConverter: {
        '1': 'OK',
        '0': ':('
      },
      model: new SpreedSheetModel(modelOptions)
    });
  };

  return {
    start: function() {
      $(document).ready(setup);
    }
  };

});


## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Google SpreedSheet</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />

    <style>
      .alert { margin-bottom: 0px; padding: 2px; text-align: center; }
    </style>

    <script id="sheet-template" type="text/x-handlebars-template">
      <h2>{{name}}</h2>

      <div style="width: 300px;">
          <input type="text" class="search form-control" placeholder="Filtrera..." />
      </div>

      <div class="table-responsive">
        <table class="table table-striped table-hover">
          <thead>
            <tr style="cursor: pointer;">
              {{#each viewModel.headerRows}}
                <th class="sort" data-sort="{{column}}">
                  <a title="Sort by '{{text}}'">{{text}}</a>
                </th>
              {{/each}}
            </tr>
          </thead>
          <tbody class="list">
            {{#each viewModel.bodyRows}}
              <tr>
                {{#each .}}
                  <td class="{{column}}">
                      <div class="{{css}}">{{ text }}</div>
                  </td>
                {{/each}}
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
    </script>
  </head>

  <body>

    <div class="container" style="margin-top: 10px;">
        <div id="loading" class="progress progress-striped active">
          <div class="progress-bar progress-bar-info"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
            Loading spreedsheet...
          </div>
        </div>

        <div id="error" class="alert alert-danger hide"></div>

        <button type="button" title="Pause/Continue polling" id="btnSync" class="hide toggle btn btn-default" data-toggle="button">
          <i id="icon" class="glyphicon glyphicon-pause"></i> Poll
        </button>
        <div id="container"></div>
    </div>

    <script data-main="app.config" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>

  </body>

</html>
	require({
	paths: {
	jquery: '//code.jquery.com/jquery-2.0.3.min',
	lodash: '//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash',
	backbone: '//cdn.jsdelivr.net/backbonejs/1.0.0/backbone-min',
	handlebars: '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min',
	listjs: '//cdnjs.cloudflare.com/ajax/libs/list.js/1.0.2/list.min'
	},

	shim: {
	backbone: {
	deps: ['jquery', 'lodash'],
	exports: 'Backbone'
	},

	handlebars: {
	exports: 'Handlebars'
	},

	lodash: {
	exports: '_'
	}
	}

	}, ['app'], function(app) {
	app.start();
	});
	/**
	* Quick and dirty "proof of concept" hack for displaying
	* a spreedsheet from Google Docs...with automatic syncing
	* that gets paused if the user moves the mouse/types in the input field.
	* The polling could also be turned on/off, by pressing the poll button.
	*
	* Uses:
	* > Require.js
	* > LoDash
	* > Backbone.js
	* > Handlebars.js (template)
	* > List.js (sorting and filtering)
	* > jQuery 2.0.3
	*
	* Needs some refactoring...
	*
	*/
	define([
	'jquery',
	'./models/SpreedSheetModel',
	'./views/SpreedSheetView'
	],
	function($, SpreedSheetModel, SpreedSheetView) {
	'use strict';

	var setup = function() {
	var parts = window.location.hash.substr(1).split('/'),

	modelOptions = {
	key: parts[0] \|\| 'o13394135408524254648.240766968415752635',
	name: unescape(parts[1] \|\| 'No name')
	};

	new SpreedSheetView({
	poll: parts[2],
	// Adds CSS-class to cells with '1'/'0' values ... could of course be removed
	cssConverter: {
	'1': 'alert alert-success',
	'0': 'alert alert-danger'
	},
	// Replace '1'/'0' values to 'Done/Missing'... could of course be removed
	valueConverter: {
	'1': 'OK',
	'0': ':('
	},
	model: new SpreedSheetModel(modelOptions)
	});
	};

	return {
	start: function() {
	$(document).ready(setup);
	}
	};

	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Google SpreedSheet</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />

	<style>
	.alert { margin-bottom: 0px; padding: 2px; text-align: center; }
	</style>

	<script id="sheet-template" type="text/x-handlebars-template">
	<h2>{{name}}</h2>

	<div style="width: 300px;">
	<input type="text" class="search form-control" placeholder="Filtrera..." />
	</div>

	<div class="table-responsive">
	<table class="table table-striped table-hover">
	<thead>
	<tr style="cursor: pointer;">
	{{#each viewModel.headerRows}}
	<th class="sort" data-sort="{{column}}">
	<a title="Sort by '{{text}}'">{{text}}</a>
	</th>
	{{/each}}
	</tr>
	</thead>
	<tbody class="list">
	{{#each viewModel.bodyRows}}
	<tr>
	{{#each .}}
	<td class="{{column}}">
	<div class="{{css}}">{{ text }}</div>
	</td>
	{{/each}}
	</tr>
	{{/each}}
	</tbody>
	</table>
	</div>
	</script>
	</head>

	<body>

	<div class="container" style="margin-top: 10px;">
	<div id="loading" class="progress progress-striped active">
	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
	Loading spreedsheet...
	</div>
	</div>

	<div id="error" class="alert alert-danger hide"></div>

	<button type="button" title="Pause/Continue polling" id="btnSync" class="hide toggle btn btn-default" data-toggle="button">
	<i id="icon" class="glyphicon glyphicon-pause"></i> Poll
	</button>
	<div id="container"></div>
	</div>

	<script data-main="app.config" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>

	</body>

	</html>