Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Backbone.js + Django
Search
Leah Culver
October 06, 2011
Programming
25
8.1k
Backbone.js + Django
Leah Culver
October 06, 2011
Tweet
Share
More Decks by Leah Culver
See All by Leah Culver
Writing stable iOS applications
leah
2
220
Idea to launch - the start of a startup
leah
1
83
Say “yes” to user feedback
leah
0
59
Intro to Dropbox APIs
leah
0
310
Working with web APIs in Swift
leah
0
100
Dropbox APIs for JavaScript developers
leah
3
1.3k
Cloud sync APIs for mobile developers
leah
1
150
Cloud sync APIs for mobile developers
leah
0
210
App Data, Everywhere: Cross-Device Content Sharing
leah
2
740
Other Decks in Programming
See All in Programming
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
19
11k
はじめてのMaterial3 Expressive
ym223
2
230
Laravel Boost 超入門
fire_arlo
2
210
Swift Updates - Learn Languages 2025
koher
2
470
rage against annotate_predecessor
junk0612
0
160
Ruby Parser progress report 2025
yui_knk
1
420
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
250
AIでLINEスタンプを作ってみた
eycjur
1
230
為你自己學 Python - 冷知識篇
eddie
1
350
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
200
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
110
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Side Projects
sachag
455
43k
Facilitating Awesome Meetings
lara
55
6.5k
The Invisible Side of Design
smashingmag
301
51k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Site-Speed That Sticks
csswizardry
10
810
Making the Leap to Tech Lead
cromwellryan
135
9.5k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Transcript
Backbone.js + Django Leah Culver PyCodeConf 2011
Convore topic-based chat on the web
None
Leafy Chat web-based IRC client
None
Grove IRC for your company
None
chat UI
Leafy Chat - pure JavaScript
$('#message-form-sender').submit(Leafy.sendMessage)
sendMessage: function(e) { var msg = $('#message').val() var row =
'<span>' + currentUser + ':</span> ' + msg row = row + '<span class="ts">' + ts + '</span>' $(Leafy.channelID(channel)).append(row) Kahlan.say(Leafy.currentChannel, msg) },
this.socket = new Orbited.TCPSocket say: function(channel, msg) { var data
= {to: channel, type: 'privmsg', body: msg} this.socket.send(JSON.stringify(data) + "\r\n") },
1. handle form submit 2. create new message 3. display
message in list 4. POST message via AJAX
Grove grove.io/app
None
backbone.js
MVC
MVC MTV
Model
window.Message = Backbone.Model.extend ({ });
Collection
window.MessageCollection = Backbone.Collection.extend ({ model: Message, });
Views
None
None
None
1. handle form submit
window.MessageFormView = Backbone.View.extend ({ events: { 'submit form': 'submitForm', },
});
2. create new message
submitForm: function() { var msg = $('#message).val(); var message =
new Message ({ 'message': msg, });
3. display message in list
currentChannel.messages.add(message);
window.MessageListView = Backbone.View.extend({ model: MessageCollection, initialize: function() { this.model.bind('add', this.addMessage);
this.model.bind('change', this.render); this.model.bind('remove', this.removeMessage); },
4. POST message via AJAX
currentChannel.messages.create({'message': msg}, { success: function(model, response) { message.set(model.attributes, { silent:
true }); }, error: function(model, error) { currentChannel.messages.remove(message); $('#message').val(msg); } });
Templates
<script id="msg-template" type="text/x-handlebars-template"> <span>{{user.username}}</span>: {{message}} <span class="ts">{{timestamp date_created}}</span> </script>
Handlebars.js
template: Handlebars.compile($('#msg-template').html())
{% include_raw "message.html" %} djangosnippets.org/snippets/1684
additional goodies
Sync
url: function() { return this.channel.url() + '/messages/'; },
url(r'^app/channels/(?P<channel_id>\d+)/messages/$', 'channel_messages'),
if request.method == 'POST': json_data = simplejson.loads(request.raw_post_data) message = Message.objects.create(
message=json_data.get('message'), ... ) return JSONResponse(request, message.data())
https://gist.github.com/1265346
Events
App.trigger('messageAdded', channel);
initialize: function() { App.bind('messageAdded', this.messageAdded); }, messageAdded: function(channel) { //
Do something... }
Router
var MainRouter = Backbone.Router.extend({ routes: { 'app/join': 'join', 'app/:name': 'channel'
}, join: function() { var joinPageView = new JoinPageView(); return joinPageView.loadPage(); }, });
Questions?
Photos http://www.flickr.com/photos/coldtaxi/426162862/ http://www.flickr.com/photos/aliaholle/5888906660/ http://www.flickr.com/photos/joshmaz/5248178452/ http://www.flickr.com/photos/1stpix_diecast_dioramas/5934583890/ http://www.flickr.com/photos/hamed/429069420/ http://www.flickr.com/photos/ittybittiesforyou/4942706804/ http://www.flickr.com/photos/krhamm/171302278/ http://www.flickr.com/photos/vinothchandar/5148046888/ http://www.flickr.com/photos/jliba/4437937329/
http://www.flickr.com/photos/seier/2034873075/ http://www.flickr.com/photos/31246066@N04/5115966185/sizes http://thefilmstage.com/news/zoolander-2-in-limbo-at-paramount/ http://www.flickr.com/photos/byebyeempire/323372590/ http://www.flickr.com/photos/shakethesky/4104894504/ http://www.flickr.com/photos/litlnemo/3296421032/ http://www.flickr.com/photos/qusic/3370510628/