Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Backbone.js + Django

5573f0b3cbe983ae0f2d00a2e610d6be?s=47 Leah Culver
October 06, 2011

Backbone.js + Django

5573f0b3cbe983ae0f2d00a2e610d6be?s=128

Leah Culver

October 06, 2011
Tweet

Transcript

  1. Backbone.js + Django Leah Culver PyCodeConf 2011

  2. Convore topic-based chat on the web

  3. None
  4. Leafy Chat web-based IRC client

  5. None
  6. Grove IRC for your company

  7. None
  8. chat UI

  9. Leafy Chat - pure JavaScript

  10. $('#message-form-sender').submit(Leafy.sendMessage)

  11. 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) },
  12. 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") },
  13. 1. handle form submit 2. create new message 3. display

    message in list 4. POST message via AJAX
  14. Grove grove.io/app

  15. None
  16. backbone.js

  17. MVC

  18. MVC MTV

  19. Model

  20. window.Message = Backbone.Model.extend ({ });

  21. Collection

  22. window.MessageCollection = Backbone.Collection.extend ({ model: Message, });

  23. Views

  24. None
  25. None
  26. None
  27. 1. handle form submit

  28. window.MessageFormView = Backbone.View.extend ({ events: { 'submit form': 'submitForm', },

    });
  29. 2. create new message

  30. submitForm: function() { var msg = $('#message).val(); var message =

    new Message ({ 'message': msg, });
  31. 3. display message in list

  32. currentChannel.messages.add(message);

  33. 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); },
  34. 4. POST message via AJAX

  35. 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); } });
  36. Templates

  37. <script id="msg-template" type="text/x-handlebars-template"> <span>{{user.username}}</span>: {{message}} <span class="ts">{{timestamp date_created}}</span> </script>

  38. Handlebars.js

  39. template: Handlebars.compile($('#msg-template').html())

  40. {% include_raw "message.html" %} djangosnippets.org/snippets/1684

  41. additional goodies

  42. Sync

  43. url: function() { return this.channel.url() + '/messages/'; },

  44. url(r'^app/channels/(?P<channel_id>\d+)/messages/$', 'channel_messages'),

  45. 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())
  46. https://gist.github.com/1265346

  47. Events

  48. App.trigger('messageAdded', channel);

  49. initialize: function() { App.bind('messageAdded', this.messageAdded); }, messageAdded: function(channel) { //

    Do something... }
  50. Router

  51. var MainRouter = Backbone.Router.extend({ routes: { 'app/join': 'join', 'app/:name': 'channel'

    }, join: function() { var joinPageView = new JoinPageView(); return joinPageView.loadPage(); }, });
  52. Questions?

  53. 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/