PageRenderTime 76ms CodeModel.GetById 12ms RepoModel.GetById 0ms app.codeStats 0ms

/backbone/rolodex_exercise_steps/step4/src/app.js

https://github.com/pamelafox/teaching-materials
JavaScript | 99 lines | 88 code | 10 blank | 1 comment | 0 complexity | f1c7ec00682bd101d54f9aeec7f4a8b6 MD5 | raw file
  1. var areGirlDevelopersCool = true;
  2. var Person = Backbone.Model.extend({
  3. defaults: {
  4. role: 'student',
  5. imgUrl: 'http://placepuppy.it/200/200',
  6. firstName: '',
  7. lastName: ''
  8. },
  9. generateUserName: function() {
  10. var userName = this.get('firstName') + this.get('lastName');
  11. this.set('userName', userName)
  12. return userName;
  13. },
  14. initialize: function() {
  15. this.generateUserName();
  16. }
  17. });
  18. var person = new Person({
  19. firstName: "Grace",
  20. lastName: "Hopper",
  21. role: "Computer Scientist",
  22. imgUrl: "http://www.history.navy.mil/photos/images/h96000/h96920k.jpg"
  23. });
  24. var People = Backbone.Collection.extend({
  25. model: Person,
  26. comparator: function(model) {
  27. return model.get('lastName').toLowerCase();
  28. }
  29. });
  30. var people = new People([
  31. {
  32. firstName: "Brenda",
  33. lastName: "Jin",
  34. role: "teacher",
  35. imgUrl: "https://pbs.twimg.com/profile_images/494918967329165312/_DNh8TnK.jpeg"
  36. },
  37. {
  38. firstName: "Pamela",
  39. lastName: "Fox",
  40. role: "teacher",
  41. imgUrl: "https://pbs.twimg.com/profile_images/458674563044233216/Rya_AmpS.jpeg"
  42. },
  43. {
  44. lastName: "Djaja",
  45. role: "TA",
  46. imgUrl: "https://lh6.googleusercontent.com/-RXfQUhzv7uQ/AAAAAAAAAAI/AAAAAAAAAAA/vO3ax0T-UzY/s128-c-k/photo.jpg"
  47. }
  48. ]);
  49. people.add({
  50. firstName: 'Julee',
  51. lastName: 'Burdekin',
  52. role: 'Adobe host'
  53. });
  54. var PersonView = Backbone.View.extend({
  55. className: 'rolodex',
  56. render: function() {
  57. var myImg = $('<img>').attr('src', this.model.get('imgUrl'));
  58. this.$el.append(myImg);
  59. return this;
  60. },
  61. events: {
  62. 'click': 'onClick'
  63. },
  64. onClick: function() {
  65. // do something cool here
  66. }
  67. });
  68. var personView = new PersonView({
  69. model: person
  70. });
  71. var RolodexView = Backbone.View.extend({
  72. initialize: function() {
  73. this.listenTo(this.collection, 'add change remove', this.render);
  74. },
  75. render: function() {
  76. this.$el.html('');
  77. var source = $("#rolodex-template").html();
  78. var template = Handlebars.compile(source);
  79. var rendered = template({people: this.collection.toJSON()});
  80. this.$el.append(rendered);
  81. return this;
  82. }
  83. });
  84. var rolodexView = new RolodexView({
  85. collection: people
  86. });
  87. $(document).ready(function() {
  88. $('body').append(rolodexView.render().$el);
  89. });