Skip to content

Commit

Permalink
overall tweaks to formatting and comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@svnlto
svnlto committed May 18, 2012
1 parent cb3cffc commit 3ae9d00
Show file tree
Hide file tree
Showing 4 changed files with 536 additions and 545 deletions.
181 changes: 94 additions & 87 deletions examples/basic/index.html
View file
@@ -1,91 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<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]-->
<title>Backbone.EventBroker - Basic Example</title>
<meta name="description" content="Basic Example usage of the Backbone.EventBroker API" />
<meta name="author" content="Eric Feminella" />

<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>
<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="../../dist/backbone-eventbroker.js"></script>
<script>

$( function() {
// create SenderView
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('');
}
}
});
// create ReceiverView
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 );
}
});

// create overall Appview
var AppView = Backbone.View.extend({
el: '#container',
initialize: function(){
this.senderView = new SenderView();
this.receiverView = new ReceiverView();
}
});

// startup demo
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 3ae9d00

Please sign in to comment.