From feded1d80b98f9a9c42899099fb247d577b44cfd Mon Sep 17 00:00:00 2001 From: leejaew Date: Tue, 1 Oct 2013 16:03:37 -0500 Subject: [PATCH 1/8] backbone.js exercise #1 --- index.html | 2 ++ src/main.js | 13 +++++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a439c98..911aa46 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,8 @@ +
+ diff --git a/src/main.js b/src/main.js index a63a7c7..f5f90b2 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,12 @@ +//Ex 1 +var ButtonView = Backbone.View.extend({ + render: function(){ + $(this.el).html(''); + } +}); -// Remove this line when you start working -alert('Hello World!'); +btn = new ButtonView({ + el: $('.my-button') +}); + +btn.render(); From 1e6f41d6a87bbd87f7ef8581d6335c602ca89e65 Mon Sep 17 00:00:00 2001 From: leejaew Date: Tue, 1 Oct 2013 16:04:41 -0500 Subject: [PATCH 2/8] backbone.js exercise #2 --- index.html | 4 ++-- src/main.js | 21 +++++++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 911aa46..cf97137 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,8 @@ -
- +

+

diff --git a/src/main.js b/src/main.js index f5f90b2..10910ec 100644 --- a/src/main.js +++ b/src/main.js @@ -10,3 +10,24 @@ btn = new ButtonView({ }); btn.render(); + + +//Ex 2 +var ProfileView = Backbone.View.extend({ + initialize: function(options){ + this.name = options.name; + this.age = options.age; + }, + render: function(){ + $(this.el).html(this.name + "," + this.age) + } +}); + +var profileView = new ProfileView({ + name: 'Bob', + age: 45, + el: $('.profile') +}) + +profileView.render(); + From 7b83046a08336b89ffb972dc07a91c0b53b7698f Mon Sep 17 00:00:00 2001 From: leejaew Date: Tue, 1 Oct 2013 16:15:00 -0500 Subject: [PATCH 3/8] add basic backbone view object --- src/main.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/main.js b/src/main.js index 10910ec..91f6f6f 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,4 @@ +/* //Ex 1 var ButtonView = Backbone.View.extend({ render: function(){ @@ -30,4 +31,23 @@ var profileView = new ProfileView({ }) profileView.render(); +*/ +//Backbone Events +var WhinyView = Backbone.View.extend({ + events: { + 'click .my-button': 'whine' + }, + + whine: function () { + alert('owwwwwwwwwwwwww'); + }, + + render: function () { + $(this.el).html(''); + return this; // "this.el", when calling the method as view.render() + } +}); + +var view = new WhinyView(); +$('body').append( view.render().el ); // render func should return "this.el" if the element 'el' is not chained when calling render(); From a451b9e9f77fe01503eb0292e1d94b2b19cbec91 Mon Sep 17 00:00:00 2001 From: leejaew Date: Tue, 1 Oct 2013 16:21:02 -0500 Subject: [PATCH 4/8] add on/off trigger to backbone view object --- src/main.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/main.js b/src/main.js index 91f6f6f..76b457b 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,3 @@ -/* //Ex 1 var ButtonView = Backbone.View.extend({ render: function(){ @@ -31,7 +30,7 @@ var profileView = new ProfileView({ }) profileView.render(); -*/ + //Backbone Events var WhinyView = Backbone.View.extend({ @@ -51,3 +50,19 @@ var WhinyView = Backbone.View.extend({ var view = new WhinyView(); $('body').append( view.render().el ); // render func should return "this.el" if the element 'el' is not chained when calling render(); + + + +//Backbone object's on, off function +var DummyView = Backbone.View.extend({}); + +var view = new DummyView(); + +view.on('random-event-name', function (x,y,z) { + console.log('bluh!', x, y, z); +}); + +view.trigger('random-event-name', 11, 22, 33); +view.off('random-event-name'); +view.trigger('random-event-name', 99, 88, 77); // no reponse! + From c14e307ceea35e6ac3c6e9b273dcd3d20e453862 Mon Sep 17 00:00:00 2001 From: leejaew Date: Tue, 1 Oct 2013 16:47:38 -0500 Subject: [PATCH 5/8] add listenTo and stopListening method to the backbone view --- src/main.js | 134 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 130 insertions(+), 4 deletions(-) diff --git a/src/main.js b/src/main.js index 76b457b..6335a42 100644 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,7 @@ btn = new ButtonView({ btn.render(); + //Ex 2 var ProfileView = Backbone.View.extend({ initialize: function(options){ @@ -32,17 +33,18 @@ var profileView = new ProfileView({ profileView.render(); + //Backbone Events var WhinyView = Backbone.View.extend({ events: { 'click .my-button': 'whine' }, - whine: function () { + whine: function(){ alert('owwwwwwwwwwwwww'); }, - render: function () { + render: function(){ $(this.el).html(''); return this; // "this.el", when calling the method as view.render() } @@ -58,11 +60,135 @@ var DummyView = Backbone.View.extend({}); var view = new DummyView(); -view.on('random-event-name', function (x,y,z) { - console.log('bluh!', x, y, z); +view.on('random-event-name', function(x,y,z){ + console.log('\nbluh!', x, y, z); }); view.trigger('random-event-name', 11, 22, 33); view.off('random-event-name'); view.trigger('random-event-name', 99, 88, 77); // no reponse! + + +//listenTo, stopListening method +var DummyView = Backbone.View.extend({}); + +var ear = new DummyView(); +var mouth = new DummyView(); + +ear.listenTo(mouth, 'shout', function(message){ + console.log('\nThe ear hears:', message); +}); + +mouth.trigger('shout', "EAR!! WHERE ARE YOU??"); + +// Stops listening to all 'shout' events on mouth +ear.stopListening(mouth, 'shout'); + +// ALTERNATIVE: Stops listening to ALL EVENTS on mouth +// ear.stopListening(mouth); + +mouth.trigger('shout', "EAR!! EAR!!!!!"); + + + +//Ex 3 +var DummyView = Backbone.View.extend({}); + +var dog = new DummyView(); +var thief = new DummyView(); +var alarm = new DummyView(); + +dog.listenTo(thief, 'scuffle', function(){ + console.log('----\nThe dog barks, woof!'); + dog.trigger('woof'); +}); + +thief.listenTo(alarm, 'ring', function(){ + console.log('----\nOh no, that sounds like the alarm!'); +}); + +thief.listenTo(dog, 'woof', function(){ + console.log('----\nAhhh!'); +}); + +console.log("----\nThe thief makes a scuffle!"); +thief.trigger('scuffle'); + +console.log("----\nThe alarm goes off!"); +alarm.trigger('ring'); + + + +//Communicating between Backbone Views - Part 1 +var radioStation = _.extend({}, Backbone.Events); + +var DummyView = Backbone.View.extend({}); +var view = new DummyView(); + +view.listenTo(radioStation, 'new_deal', function(deal){ + console.log("\nIt's a new deal! ", deal); +}); + +radioStation.trigger('new_deal', { name: 'Buy 1 Get 1 FREE'}); + + +//Communicating between Backbone Views - Part 2 +var radioStation = _.extend({}, Backbone.Events); + +var BubbleView = Backbone.View.extend({ + initialize: function(options){ + this.size = options.size; + }, + pop: function(){ + radioStation.trigger('pop', this.size); + } +}); + +var BubbleCounterView = Backbone.View.extend({ + total: 0, + initialize: function(options){ + this.listenTo(radioStation, 'pop', this.recordPop); + }, + recordPop: function(bubbleSize){ + this.total += bubbleSize; + console.log('\nTotal bubble size popped: ', this.total); + } +}); + +var smallBubbleView = new BubbleView({ size: 2 }); +var largeBubbleView = new BubbleView({ size: 17 }); +var bubbleCounterView = new BubbleCounterView(); + +smallBubbleView.pop(); +largeBubbleView.pop(); + + +//Ex 4.1 - Create Backbone Event Aggregator +var chatServer = _.extend({}, Backbone.Events); + +var ChatView = Backbone.View.extend({ + initialize: function(options){ + this.name = options.name + }, + sendMessage: function(msg){ + chatServer.trigger('message', this.name, msg) + } +}); + +var testChatListener = new (Backbone.View.extend({})); +var chatCount = 0; +testChatListener.listenTo(chatServer, 'message', function (name, message) { + console.log('\n' + name + ' says:' + message); + chatCount += 1; +}); +// ---- + +var aliceChatView = new ChatView({ name: 'Alice' }); +var bobChatView = new ChatView({ name: 'Bob' }); + +bobChatView.sendMessage("\nhi alice"); +aliceChatView.sendMessage("\nwho is this?"); +bobChatView.sendMessage("\nalice no"); + +console.log('\nChat count should be 3:', chatCount); From c310b7f12706c39668f3fdef194578d127b11de2 Mon Sep 17 00:00:00 2001 From: leejaew Date: Tue, 1 Oct 2013 16:49:02 -0500 Subject: [PATCH 6/8] add more examples using event trigger and listenTo methods --- src/main.js | 72 ----------------------------------------------------- 1 file changed, 72 deletions(-) diff --git a/src/main.js b/src/main.js index 6335a42..ffbdeb9 100644 --- a/src/main.js +++ b/src/main.js @@ -120,75 +120,3 @@ alarm.trigger('ring'); -//Communicating between Backbone Views - Part 1 -var radioStation = _.extend({}, Backbone.Events); - -var DummyView = Backbone.View.extend({}); -var view = new DummyView(); - -view.listenTo(radioStation, 'new_deal', function(deal){ - console.log("\nIt's a new deal! ", deal); -}); - -radioStation.trigger('new_deal', { name: 'Buy 1 Get 1 FREE'}); - - -//Communicating between Backbone Views - Part 2 -var radioStation = _.extend({}, Backbone.Events); - -var BubbleView = Backbone.View.extend({ - initialize: function(options){ - this.size = options.size; - }, - pop: function(){ - radioStation.trigger('pop', this.size); - } -}); - -var BubbleCounterView = Backbone.View.extend({ - total: 0, - initialize: function(options){ - this.listenTo(radioStation, 'pop', this.recordPop); - }, - recordPop: function(bubbleSize){ - this.total += bubbleSize; - console.log('\nTotal bubble size popped: ', this.total); - } -}); - -var smallBubbleView = new BubbleView({ size: 2 }); -var largeBubbleView = new BubbleView({ size: 17 }); -var bubbleCounterView = new BubbleCounterView(); - -smallBubbleView.pop(); -largeBubbleView.pop(); - - -//Ex 4.1 - Create Backbone Event Aggregator -var chatServer = _.extend({}, Backbone.Events); - -var ChatView = Backbone.View.extend({ - initialize: function(options){ - this.name = options.name - }, - sendMessage: function(msg){ - chatServer.trigger('message', this.name, msg) - } -}); - -var testChatListener = new (Backbone.View.extend({})); -var chatCount = 0; -testChatListener.listenTo(chatServer, 'message', function (name, message) { - console.log('\n' + name + ' says:' + message); - chatCount += 1; -}); -// ---- - -var aliceChatView = new ChatView({ name: 'Alice' }); -var bobChatView = new ChatView({ name: 'Bob' }); - -bobChatView.sendMessage("\nhi alice"); -aliceChatView.sendMessage("\nwho is this?"); -bobChatView.sendMessage("\nalice no"); - -console.log('\nChat count should be 3:', chatCount); From 9ae0669629774dac24a940a00880bf16100b02ea Mon Sep 17 00:00:00 2001 From: leejaew Date: Tue, 1 Oct 2013 16:50:19 -0500 Subject: [PATCH 7/8] add examples that communicate between backbone views --- src/main.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/src/main.js b/src/main.js index ffbdeb9..d72bd87 100644 --- a/src/main.js +++ b/src/main.js @@ -120,3 +120,47 @@ alarm.trigger('ring'); +//Communicating between Backbone Views - Part 1 +var radioStation = _.extend({}, Backbone.Events); + +var DummyView = Backbone.View.extend({}); +var view = new DummyView(); + +view.listenTo(radioStation, 'new_deal', function(deal){ + console.log("\nIt's a new deal! ", deal); +}); + +radioStation.trigger('new_deal', { name: 'Buy 1 Get 1 FREE'}); + + +//Communicating between Backbone Views - Part 2 +var radioStation = _.extend({}, Backbone.Events); + +var BubbleView = Backbone.View.extend({ + initialize: function(options){ + this.size = options.size; + }, + pop: function(){ + radioStation.trigger('pop', this.size); + } +}); + +var BubbleCounterView = Backbone.View.extend({ + total: 0, + initialize: function(options){ + this.listenTo(radioStation, 'pop', this.recordPop); + }, + recordPop: function(bubbleSize){ + this.total += bubbleSize; + console.log('\nTotal bubble size popped: ', this.total); + } +}); + +var smallBubbleView = new BubbleView({ size: 2 }); +var largeBubbleView = new BubbleView({ size: 17 }); +var bubbleCounterView = new BubbleCounterView(); + +smallBubbleView.pop(); +largeBubbleView.pop(); + + From 5f6879dfcb3019e90cdca967f48486c8fd369bd2 Mon Sep 17 00:00:00 2001 From: leejaew Date: Tue, 1 Oct 2013 16:50:53 -0500 Subject: [PATCH 8/8] create backbone event aggregator --- src/main.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/main.js b/src/main.js index d72bd87..6335a42 100644 --- a/src/main.js +++ b/src/main.js @@ -164,3 +164,31 @@ smallBubbleView.pop(); largeBubbleView.pop(); +//Ex 4.1 - Create Backbone Event Aggregator +var chatServer = _.extend({}, Backbone.Events); + +var ChatView = Backbone.View.extend({ + initialize: function(options){ + this.name = options.name + }, + sendMessage: function(msg){ + chatServer.trigger('message', this.name, msg) + } +}); + +var testChatListener = new (Backbone.View.extend({})); +var chatCount = 0; +testChatListener.listenTo(chatServer, 'message', function (name, message) { + console.log('\n' + name + ' says:' + message); + chatCount += 1; +}); +// ---- + +var aliceChatView = new ChatView({ name: 'Alice' }); +var bobChatView = new ChatView({ name: 'Bob' }); + +bobChatView.sendMessage("\nhi alice"); +aliceChatView.sendMessage("\nwho is this?"); +bobChatView.sendMessage("\nalice no"); + +console.log('\nChat count should be 3:', chatCount);