/app/index.html
HTML | 291 lines | 228 code | 46 blank | 17 comment | 0 complexity | 79f74dcb6740e225cf584d6326104243 MD5 | raw file
- <!doctype html>
- <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
- <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
- <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
- <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Backbone.js and PubNub Integration - Real Time Backbone Collections and Models</title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width">
- <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" href="bower_components/google-code-prettify/src/prettify.css">
- <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
- <!-- build:css(.tmp) styles/main.css -->
- <link rel="stylesheet" href="styles/main.css">
- <!-- endbuild -->
- <!-- build:js scripts/vendor/modernizr.js -->
- <script src="bower_components/modernizr/modernizr.js"></script>
- <!-- endbuild -->
- </head>
- <body>
- <a href="https://github.com/pubnub" id="github"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
- <div class="title">
- <div class="container">
- <div class="row-fluid">
- <div class="span12">
- <h1>Backbone.js + PubNub</h1>
- <h3>Real-Time Multi-User Backbone Collections and Models</h3>
- </div>
- </div>
- </div>
- </div>
- <div class="main">
- <div class="container">
- <div class="row-fluid border-row">
- <div class="span6">
- <div id="todoapp">
- <header>
- <h3>Todos</h3>
- <input id="new-todo" type="text" placeholder="What needs to be done?">
- <br />
- <input id="toggle-all" type="checkbox">
- <label for="toggle-all">Mark all as complete</label>
- </header>
- <section id="main">
- <div class="row-fluid">
- <ul id="todo-list"></ul>
- </div>
- </section>
- <footer>
- <a id="clear-completed">Clear completed</a>
- <div id="todo-count"></div>
- <div id="instructions">
- Double-click to edit a todo.
- </div>
- </footer>
- </div>
- </div>
- <div class="span6 what-is-happening">
- <div>
- <h2>How It Works</h2>
- <p>This is an example of the <a href="http://backbonejs.org/examples/todos/index.html" target="_blank">Backbone Todo List</a> extended with the real-time power of <a href="http://pubnub.com" target="_blank">PubNub</a>. Every time a change is detected in the collection of todos, that change is propagated to all other clients running the same demo in their browser. <a href="http://pubnub.github.io/backbone" target="_blank">Open this page in another browser window</a> to see it in action!</p>
- <a href="http://github.com/pubnub/backbone" id="github" class="btn btn-large"><i class="icon-github-sign"></i>View on GitHub</a>
- <br />
- <br />
- <iframe src="http://ghbtns.com/github-btn.html?user=pubnub&repo=backbone&type=watch&count=true"
- allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
- <a href="https://twitter.com/share" class="twitter-share-button" data-via="pubnub">Tweet</a>
- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
- <div class="fb-like" data-href="https://www.facebook.com/PubNub" data-width="450" data-layout="button_count" data-show-faces="false" data-send="false"></div>
- </div>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <h3>Getting Started</h3>
- <p>You can install the package using bower and <code>bower install pubnub-backbone</code> or by cloning this repository. Install the PubNub library along with this one in your html file like so, replacing the *'s with the PubNub version you want to use:</p>
- <p><pre class="prettyprint linenums"><script src="http://cdn.pubnub.com/pubnub.min.js"></script>
- <script src="/path/to/backbone-pubnub.min.js"></script></pre></p>
- <p>From here the framework gives you three ways to integrate:</p>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <h3>Backbone.PubNub.Collection</h3>
- <p>This collection takes the pubnub instance and a name and then publishes all create, update, and delete methods across clients using PubNub. The <code>name</code> property is used to generate a unique channel name so collections do not collide with each other. As a warning, with the same name will update each other regardless of what class they come from.</p>
- <p><pre class="prettyprint linenums">
- var MyCollection = Backbone.PubNub.Collection.extend({
- name: 'MyCollection', // Used to namespace the updates to this collection
- pubnub: pubnub // A global instance of PubNub
- });
- var myCollection = new MyCollection();</pre></p>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <h3>Backbone.sync</h3>
- <p>The Backbone.sync method allows you to have a collection with a remote store, much like the LocalStorage module from the original Backbone Todos demo. This allows you to take updates from other clients when you want them and not automatically.</p>
- <p><pre class="prettyprint linenums">
- var MyCollection = Backbone.Collection.extend({
- pubnub: new Backbone.PubNub(pubnub, "MyCollection") // A PubNub plugin to make the collection real-time
- });
- var myCollection = new MyCollection();</pre></p>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <h3>Backbone.PubNub.Model</h3>
- <p>This will create a model that is updated in real-time across all instances. This works very similarly to the collection in that it publishes all changes across the PubNub network.</p>
- </div>
- </div>
- <div class="row-fluid border-row">
- <div class="span6">
- <p><pre class="prettyprint linenums">
- var MyModel = Backbone.PubNub.Model.extend({
- name: 'MyModel',
- pubnub: pubnub
- });
- var myModel = new MyModel();</pre></p>
- </div>
- <div class="span6">
- <div id="mymodel"></div>
- </div>
- </div>
- <div class="row-fluid">
- <div class="span4">
- <h3>What is PubNub?</h3>
- <p>Today’s users expect to interact in real-time. PubNub makes it easy for you to add real-time capabilities to your apps, without worrying about the infrastructure. Build apps that allow your users to engage in real-time across mobile, browser, desktop and server.</p>
- </div>
- <div class="span8">
- <h3>What Can I Build With PubNub?</h3>
- <p>The PubNub Real-Time Network takes care of the connections, global infrastructure and key building blocks for real-time interactivity, so you can focus creating killer apps…</p>
- <ul style="float: left; width: 50%;">
- <li>Real-Time Collaboration</li>
- <li>Machine-to-Machine</li>
- <li>Real-Time Financial Streams</li>
- <li>Real-Time Location Tracking</li>
- <li>Call Triggering</li>
- </ul>
- <ul>
- <li>2nd Screen Sync</li>
- <li>Live Dashboards</li>
- <li>Multi-Player Games</li>
- <li>Group Chat Rooms</li>
- <li>Thousands more…</li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div class="highlight">
- <div class="container">
- <div class="row-fluid">
- <div class="span8">
- <h3 class="call-to-action">Start Building Real-Time Apps Now!</h3>
- </div>
- <div class="span2 offset2">
- <a href="http://pubnub.com/free-trial" class="btn btn-large" id="get-started">Get Started</a>
- </div>
- </div>
- </div>
- </div>
- <footer class="text-center">
- © 2013 PubNub
- </footer>
- <script type="text/template" id="mymodel-template">
- <h3>Real-Time Model</h3>
- <p>Open this page in another window to see me update in real-time!</p>
- <p>Rand: <%= rand %></p>
- <button id="update">Set Random Number</button>
- </script>
- <!-- Templates -->
- <script type="text/template" id="item-template">
- <div class="view">
- <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
- <label><%- title %></label>
- <a class="destroy"><i class="icon-remove-circle"></i></a>
- </div>
- <input class="edit" type="text" value="<%- title %>" />
- </script>
- <script type="text/template" id="stats-template">
- <% if (done) { %>
- <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>
- <% } %>
- <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>
- </script>
- <!--[if lt IE 7]>
- <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
- <![endif]-->
- <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
- <script>
- (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
- function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
- e=o.createElement(i);r=o.getElementsByTagName(i)[0];
- e.src='//www.google-analytics.com/analytics.js';
- r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
- ga('create','UA-41019038-2');ga('send','pageview');
- </script>
- <script type="text/javascript">
- (function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f);b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==
- typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<i.length;g++)f(c,i[g]);
- b._i.push([a,e,d])};b.__SV=1.2}})(document,window.mixpanel||[]);
- mixpanel.init("778311a72655af3d2eaebacbccf26122");
- </script>
- <div id="fb-root"></div>
- <script>(function(d, s, id) {
- var js, fjs = d.getElementsByTagName(s)[0];
- if (d.getElementById(id)) return;
- js = d.createElement(s); js.id = id;
- js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
- fjs.parentNode.insertBefore(js, fjs);
- }(document, 'script', 'facebook-jssdk'));</script>
- <script src="http://cdn.pubnub.com/pubnub-3.5.3.min.js"></script>
- <!-- build:js scripts/plugins.js -->
- <script src="bower_components/jquery/jquery.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-affix.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-alert.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-dropdown.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-tooltip.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-modal.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-transition.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-button.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-popover.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-typeahead.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-carousel.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-scrollspy.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-collapse.js"></script>
- <script src="bower_components/sass-bootstrap/js/bootstrap-tab.js"></script>
- <script src="bower_components/underscore/underscore.js"></script>
- <script src="bower_components/backbone/backbone.js"></script>
- <script src="bower_components/google-code-prettify/src/prettify.js"></script>
- <!-- endbuild -->
- <script>
- (function(){
- prettyPrint();
- })();
- </script>
- <!-- build:js(.tmp) scripts/main.js -->
- <script src="scripts/backbone-pubnub.js"></script>
- <script src="scripts/main.js"></script>
- <!-- endbuild -->
- </body>
- </html>