Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Updating example to reflect vendor package updates.

  • Loading branch information...
commit 169555a67af6942a4edb7b312231a8da4f293f05 1 parent 870972d
@efeminella authored
Showing with 107 additions and 90 deletions.
  1. +107 −90 examples/basic/index.html
View
197 examples/basic/index.html
@@ -1,98 +1,115 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <head>
+ <title>Backbone.EventBroker - Basic Example</title>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <meta name="description" content="Basic Example usage of the Backbone.EventBroker API" />
+ <meta name="author" content="Eric Feminella" />
- <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="../../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('');
+ <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;
}
- }
- });
- // 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 );
- }
- });
+ 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]-->
- // create overall Appview
- var AppView = Backbone.View.extend({
- el: '#container',
- initialize: function(){
- this.senderView = new SenderView();
- this.receiverView = new ReceiverView();
- }
- });
+ <script src="../../vendor/jquery/1.8.3/jquery.min.js"></script>
+ <script src="../../vendor/underscore/1.4.4/underscore-min.js"></script>
+ <script src="../../vendor/backbone/1.0.0/backbone-min.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);
+ }
+ });
- // startup demo
- var app = new AppView();
+ // create overall Appview
+ var AppView = Backbone.View.extend({
+ el : '#container',
+ initialize : function() {
+ this.senderView = new SenderView();
+ this.receiverView = new ReceiverView();
+ }
+ });
- });
- </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>
+ // 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>
Please sign in to comment.
Something went wrong with that request. Please try again.