Permalink
Browse files

Adding examples.

  • Loading branch information...
1 parent a963bb3 commit 45995047a598523fe7ea008fd9025c6664d88acd @efeminella committed Apr 25, 2012
Showing with 91 additions and 0 deletions.
  1. +91 −0 examples/basic/index.html
View
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+ <title>Backbone.EventBroker - Basic Example</title>
+ <meta name="description" content="Basic Example usage of the Backbone.EventBroker API" />
+ <meta name="author" content="Eric Feminella" />
+
+ <style>
+ /* just some basic styles ... */
+ html, body { font-family: Arial, Helvetica, sans-serif;color: #333; }
+ #container { width: 600px; height: 100%; margin: 40px auto; text-align: center;}
+ section { border: 1px solid #cccccc; width: 400px; height: 120px; padding: 10px; margin: 20px auto;}
+ h1, h2 { margin: 0 0 10px 0;}
+ input { width: 200px; }
+ </style>
+
+ <!--[if lt IE 9]>
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <script src="../../vendor/jquery/1.7.1/jquery.min.js"></script>
+ <script src="../../vendor/underscore/1.3.1/underscore-min.js"></script>
+ <script src="../../vendor/backbone/0.9.1/backbone.js"></script>
+ <script src="../../src/backbone-eventbroker.js"></script>
+ <script>
+ $( function()
+ {
+ var SenderView = Backbone.View.extend({
+ el: '#sender',
+ // reference the EventBroker
+ broker: Backbone.EventBroker,
+ events: {
+ 'click #send' : 'send',
+ 'keyup #text' : 'send'
+ },
+ initialize: function(){
+ this.$text = this.$('#text').focus();
+ },
+ send: function( evt ) {
+ if ( !evt.keyCode || evt.keyCode === 13 ) {
+ // trigger the message event ...
+ this.broker.trigger( 'message', this.$text.val() );
+ this.$text.val('');
+ }
+ }
+ });
+ var ReceiverView = Backbone.View.extend({
+ el: '#receiver',
+ // reference the EventBroker
+ broker: Backbone.EventBroker,
+ initialize: function(){
+ this.$text = this.$( '#message' );
+ // listen for the message event ...
+ this.broker.on( 'message', this.receive, this );
+ },
+ receive: function( message ) {
+ this.$text.text( message );
+ }
+ });
+ var AppView = Backbone.View.extend({
+ el: '#container',
+ initialize: function(){
+ this.senderView = new SenderView();
+ this.receiverView = new ReceiverView();
+ }
+ });
+ var app = new AppView();
+ });
+ </script>
+ </head>
+ <body>
+ <div id="container">
+ <header>
+ <h1>Backbone.EventBroker</h1>
+ <h2>Basic Example</h2>
+ </header>
+ <section id="sender">
+ <h1>Sender</h1>
+ <input id="text" type="text" />
+ <button id="send" title="Send">Send</button>
+ </section>
+ <section id="receiver">
+ <h1>Receiver</h1>
+ <p id="message"></p>
+ </section>
+ </div>
+ </body>
+</html>

0 comments on commit 4599504

Please sign in to comment.