From 48e9696da239e684d212de74b643f2e1521634e7 Mon Sep 17 00:00:00 2001 From: Ashtn Date: Tue, 30 May 2017 16:50:18 -0700 Subject: [PATCH 1/5] wave 1 complete, with ability to display instance of model --- src/app.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/src/app.js b/src/app.js index 854f991..fa6383d 100644 --- a/src/app.js +++ b/src/app.js @@ -1 +1,32 @@ import $ from 'jquery'; +import _ from 'underscore'; +// links contact model to application js file +import Contact from './app/models/contact.js'; + + +// new instance of contact model with static data, this is just for testing purposes +var myContact = new Contact({ + name: 'Ashton', + email: 'ashton@ashton.com', + phoneNumber: '909-000-0000' +}); + +// NOTE notice the use of closures here +var render = function(contact){ + // selected the html that lives with the tmpl-contact-card and assigning to the var templateText + var templateText = $('#tmpl-contact-card').html(); + + // create underscore template using the previously generated templateText (think of it as creating a new instance of underscore) + var templateObject = _.template(templateText); + +// compile object data into underscore template oject + var compiledHTML = templateObject(contact.toJSON()); + + //append + $('#contact-cards').append(compiledHTML); +}; + +$(document).ready(function() { + console.log('heyyyy'); + render(myContact); +}); From e970e603de7b3f16de0e6577e5f17896e63d48c0 Mon Sep 17 00:00:00 2001 From: Ashtn Date: Thu, 1 Jun 2017 20:24:46 -0700 Subject: [PATCH 2/5] modal displays with name, email and phone number --- src/app.js | 56 ++++++++++++++++------- src/app/views/contact_view.js | 24 ++++++++++ src/app/views/rolodex_view.js | 83 +++++++++++++++++++++++++++++++++++ 3 files changed, 148 insertions(+), 15 deletions(-) create mode 100644 src/app/views/rolodex_view.js diff --git a/src/app.js b/src/app.js index fa6383d..f69d135 100644 --- a/src/app.js +++ b/src/app.js @@ -2,31 +2,57 @@ import $ from 'jquery'; import _ from 'underscore'; // links contact model to application js file import Contact from './app/models/contact.js'; +import Rolodex from './app/collections/rolodex.js'; +import ContactView from './app/views/contact_view.js'; +import RolodexView from './app/views/rolodex_view.js'; // new instance of contact model with static data, this is just for testing purposes -var myContact = new Contact({ +var myContact = new Contact( + { name: 'Ashton', email: 'ashton@ashton.com', - phoneNumber: '909-000-0000' -}); + phone: '909-000-0000' +} +// { +// name: 'Test', +// email: 'Test@test.com', +// phoneNumber: '000-000-0000' +// } +); // NOTE notice the use of closures here -var render = function(contact){ - // selected the html that lives with the tmpl-contact-card and assigning to the var templateText - var templateText = $('#tmpl-contact-card').html(); +// var render = function(contact){ +// // selected the html that lives with the tmpl-contact-card and assigning to the var templateText +// var templateText = $('#tmpl-contact-card').html(); +// +// // create underscore template using the previously generated templateText (think of it as creating a new instance of underscore) +// var templateObject = _.template(templateText); +// +// // compile object data into underscore template oject +// var compiledHTML = templateObject(contact.toJSON()); +// +// //append +// $('#contact-cards').append(compiledHTML); +// }; - // create underscore template using the previously generated templateText (think of it as creating a new instance of underscore) - var templateObject = _.template(templateText); +// new instance of Rolodex (collection) +var myRolodex = new Rolodex(myContact); -// compile object data into underscore template oject - var compiledHTML = templateObject(contact.toJSON()); - //append - $('#contact-cards').append(compiledHTML); -}; $(document).ready(function() { - console.log('heyyyy'); - render(myContact); + // console.log('heyyyy'); + // render(myContact); +// the object shows up in params + var myRolodexView = new RolodexView({ + model: myRolodex, + // this goes to rolodex_view.js + // _.template() returns a functoin + template: _.template($('#tmpl-contact-card').html()), + // setting el to be main? + // because there is one list, we can assign el to main + el: 'body' + }); + myRolodexView.render(); }); diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js index 2d76cc9..fdc3bb6 100644 --- a/src/app/views/contact_view.js +++ b/src/app/views/contact_view.js @@ -1,6 +1,30 @@ import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; +import Contact from '../models/contact.js'; const ContactView = Backbone.View.extend({ + + initialize: function(params){ + this.template = params.myTemplate; // this matches the render + // this.listenTo(this.model, "change", this.render); + }, + render: function(){ + // console.log('this.model: ', this.model); + var generatedHTMLView = this.template(this.model.toJSON()); + + this.$el.html(generatedHTMLView); + + return this; + }, + //////// acts kind of like the controller - charles ////// + events: { + 'click': 'onClick' +}, +onClick: function(){ + var click = this.trigger('selectedCard', this.model); + console.log('click', click); +} }); export default ContactView; diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js new file mode 100644 index 0000000..6756a7d --- /dev/null +++ b/src/app/views/rolodex_view.js @@ -0,0 +1,83 @@ +import Backbone from 'backbone'; +import $ from 'jquery'; +import _ from 'underscore'; +import Contact from '../models/contact.js'; +import ContactView from '../views/contact_view.js'; +// import ContactDetailsView from '../views/contact_details_view.js'; + +var RolodexView = Backbone.View.extend({ + initialize: function(params){ + this.contactTemplate = params.template; + this.listenTo(this.model, "update", this.render); + this.modalTemplate = _.template($('#tmpl-contact-details').html()); + }, + render: function(){ + // clears something + + this.$('#contact-cards').empty(); + // console.log('this.contactTempalte: ', this.contactTemplate); + // console.log('this.modalTemplate: ', this.modalTemplate); + var that = this; + + this.model.each(function(contact){ + var contactView = new ContactView({ + model: contact, + myTemplate: that.contactTemplate, // gives it to contact view + // tagName: '' + }); + that.listenTo(contactView, "selectedCard", that.displayModal); + // rendered the view and append the new view to the 'todo-items' + that.$('#contact-cards').append(contactView.render().$el); + }); + //we `return this` so that we can `myView.render().el` + return this; + }, + events: { + //listens for the click on the save + 'click .btn-save': 'saveContact', + 'click .btn-cancel': 'clearContact', + // 'click .contact-card': 'viewContact' + }, + getInputData: function(){ + var inputName = this.$('#name').val(); this.$('#name').val(''); + // var inputName = this.$('label[name=name]').val(); this.$('lable[name=name]').val(''); + var inputEmail = this.$('#email').val(); this.$('#email').val(''); + // var inputEmail = this.$('label[name=email]').val(); this.$('lable[name=name]').val(''); + var inputPhone = this.$('#phone').val(); this.$('#phone').val(''); + // var inputPhone = this.$('label[name=phone]').val(); this.$('lable[name=name]').val(''); + + return { + name: inputName, + email: inputEmail, + phone: inputPhone, + }; + }, + // creates new contact model object with the information passed from the form + saveContact: function(){ + var contact = new Contact(this.getInputData()); + console.log('add contact-buttion'); + //adds the new contact model to the rolodex collection + // this add triggers the `update` listener above + this.model.add(contact); + }, + clearContact: function(){ + this.$('#name').val(''); + this.$('#email').val(''); + this.$('#phone').val(''); + }, + + displayModal: function(contact){ + // console.log('contact: ', contact); + // console.log('contact.toJSON: ',contact.toJSON()); + $('#contact-details').empty(); + + // var modalDetails = this. + var generatedModalTemplate = this.modalTemplate(contact.attributes); + + this.$('#contact-details').append(generatedModalTemplate); + + return this; + } +}); + +export default RolodexView; From daf052d2a73194e4c45efccc885a211e66215e8c Mon Sep 17 00:00:00 2001 From: Ashtn Date: Fri, 2 Jun 2017 15:01:09 -0700 Subject: [PATCH 3/5] can hide modal! --- src/app.js | 20 +++++++++++--------- src/app/views/contact_view.js | 5 +++-- src/app/views/rolodex_view.js | 31 ++++++++++++++++++++++--------- 3 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/app.js b/src/app.js index f69d135..235917c 100644 --- a/src/app.js +++ b/src/app.js @@ -8,18 +8,20 @@ import ContactView from './app/views/contact_view.js'; import RolodexView from './app/views/rolodex_view.js'; // new instance of contact model with static data, this is just for testing purposes -var myContact = new Contact( + +$('#contact-details').hide(); + +var myContacts = [ { name: 'Ashton', email: 'ashton@ashton.com', phone: '909-000-0000' -} -// { -// name: 'Test', -// email: 'Test@test.com', -// phoneNumber: '000-000-0000' -// } -); +}, +{ + name: 'Test', + email: 'Test@test.com', + phone: '000-000-0000' +}]; // NOTE notice the use of closures here // var render = function(contact){ @@ -37,7 +39,7 @@ var myContact = new Contact( // }; // new instance of Rolodex (collection) -var myRolodex = new Rolodex(myContact); +var myRolodex = new Rolodex(myContacts); diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js index fdc3bb6..8c4d1fb 100644 --- a/src/app/views/contact_view.js +++ b/src/app/views/contact_view.js @@ -21,9 +21,10 @@ const ContactView = Backbone.View.extend({ events: { 'click': 'onClick' }, -onClick: function(){ +onClick: function(event){ + // Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. + event.stopPropagation(); var click = this.trigger('selectedCard', this.model); - console.log('click', click); } }); diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js index 6756a7d..e6902c4 100644 --- a/src/app/views/rolodex_view.js +++ b/src/app/views/rolodex_view.js @@ -8,6 +8,7 @@ import ContactView from '../views/contact_view.js'; var RolodexView = Backbone.View.extend({ initialize: function(params){ this.contactTemplate = params.template; + //backbone event listener this.listenTo(this.model, "update", this.render); this.modalTemplate = _.template($('#tmpl-contact-details').html()); }, @@ -25,6 +26,7 @@ var RolodexView = Backbone.View.extend({ myTemplate: that.contactTemplate, // gives it to contact view // tagName: '' }); + //backbone event listener for new contactView that.listenTo(contactView, "selectedCard", that.displayModal); // rendered the view and append the new view to the 'todo-items' that.$('#contact-cards').append(contactView.render().$el); @@ -36,15 +38,15 @@ var RolodexView = Backbone.View.extend({ //listens for the click on the save 'click .btn-save': 'saveContact', 'click .btn-cancel': 'clearContact', - // 'click .contact-card': 'viewContact' + 'click': 'hideModal' }, getInputData: function(){ - var inputName = this.$('#name').val(); this.$('#name').val(''); - // var inputName = this.$('label[name=name]').val(); this.$('lable[name=name]').val(''); - var inputEmail = this.$('#email').val(); this.$('#email').val(''); - // var inputEmail = this.$('label[name=email]').val(); this.$('lable[name=name]').val(''); - var inputPhone = this.$('#phone').val(); this.$('#phone').val(''); - // var inputPhone = this.$('label[name=phone]').val(); this.$('lable[name=name]').val(''); + + var inputName = this.$('input[name=name]').val(); this.$('input[name=name]').val(''); + + var inputEmail = this.$('input[name=email]').val(); this.$('label[name=email]').val(''); + + var inputPhone = this.$('input[name=phone]').val(); this.$('label[name=phone]').val(''); return { name: inputName, @@ -55,7 +57,6 @@ var RolodexView = Backbone.View.extend({ // creates new contact model object with the information passed from the form saveContact: function(){ var contact = new Contact(this.getInputData()); - console.log('add contact-buttion'); //adds the new contact model to the rolodex collection // this add triggers the `update` listener above this.model.add(contact); @@ -67,16 +68,28 @@ var RolodexView = Backbone.View.extend({ }, displayModal: function(contact){ + console.log('clicked Contact now showing modal'); // console.log('contact: ', contact); // console.log('contact.toJSON: ',contact.toJSON()); $('#contact-details').empty(); + $('#contact-details').show(); // var modalDetails = this. var generatedModalTemplate = this.modalTemplate(contact.attributes); + // TODO what's best practice? + //var generatedModalTemplate = this.modalTemplate(contact.toJSON()) this.$('#contact-details').append(generatedModalTemplate); + // + // return this; + }, + hideModal: function(event){ - return this; + // console.log('event.target', event.target); + + if($('#contact-details').has(event.target).length === 0 && !$('#contact-details').is(event.target)){ + $('#contact-details').hide(); + } } }); From 1deaed5201765b30453940a11b1b9861271d5eb4 Mon Sep 17 00:00:00 2001 From: Ashtn Date: Mon, 5 Jun 2017 08:49:44 -0700 Subject: [PATCH 4/5] cleared comments out of files --- src/app/views/contact_view.js | 5 +---- src/app/views/rolodex_view.js | 32 ++++++++++---------------------- 2 files changed, 11 insertions(+), 26 deletions(-) diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js index 8c4d1fb..aafe760 100644 --- a/src/app/views/contact_view.js +++ b/src/app/views/contact_view.js @@ -6,18 +6,15 @@ import Contact from '../models/contact.js'; const ContactView = Backbone.View.extend({ initialize: function(params){ - this.template = params.myTemplate; // this matches the render - // this.listenTo(this.model, "change", this.render); + this.template = params.myTemplate; }, render: function(){ - // console.log('this.model: ', this.model); var generatedHTMLView = this.template(this.model.toJSON()); this.$el.html(generatedHTMLView); return this; }, - //////// acts kind of like the controller - charles ////// events: { 'click': 'onClick' }, diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js index e6902c4..a5320ef 100644 --- a/src/app/views/rolodex_view.js +++ b/src/app/views/rolodex_view.js @@ -3,39 +3,36 @@ import $ from 'jquery'; import _ from 'underscore'; import Contact from '../models/contact.js'; import ContactView from '../views/contact_view.js'; -// import ContactDetailsView from '../views/contact_details_view.js'; + var RolodexView = Backbone.View.extend({ initialize: function(params){ this.contactTemplate = params.template; - //backbone event listener + this.listenTo(this.model, "update", this.render); + this.modalTemplate = _.template($('#tmpl-contact-details').html()); }, render: function(){ - // clears something this.$('#contact-cards').empty(); - // console.log('this.contactTempalte: ', this.contactTemplate); - // console.log('this.modalTemplate: ', this.modalTemplate); + var that = this; this.model.each(function(contact){ + var contactView = new ContactView({ model: contact, - myTemplate: that.contactTemplate, // gives it to contact view - // tagName: '' + myTemplate: that.contactTemplate, }); - //backbone event listener for new contactView + that.listenTo(contactView, "selectedCard", that.displayModal); - // rendered the view and append the new view to the 'todo-items' + that.$('#contact-cards').append(contactView.render().$el); }); - //we `return this` so that we can `myView.render().el` return this; }, events: { - //listens for the click on the save 'click .btn-save': 'saveContact', 'click .btn-cancel': 'clearContact', 'click': 'hideModal' @@ -54,11 +51,8 @@ var RolodexView = Backbone.View.extend({ phone: inputPhone, }; }, - // creates new contact model object with the information passed from the form saveContact: function(){ var contact = new Contact(this.getInputData()); - //adds the new contact model to the rolodex collection - // this add triggers the `update` listener above this.model.add(contact); }, clearContact: function(){ @@ -68,25 +62,19 @@ var RolodexView = Backbone.View.extend({ }, displayModal: function(contact){ - console.log('clicked Contact now showing modal'); - // console.log('contact: ', contact); - // console.log('contact.toJSON: ',contact.toJSON()); + $('#contact-details').empty(); $('#contact-details').show(); - // var modalDetails = this. + var generatedModalTemplate = this.modalTemplate(contact.attributes); // TODO what's best practice? //var generatedModalTemplate = this.modalTemplate(contact.toJSON()) this.$('#contact-details').append(generatedModalTemplate); - // - // return this; }, hideModal: function(event){ - // console.log('event.target', event.target); - if($('#contact-details').has(event.target).length === 0 && !$('#contact-details').is(event.target)){ $('#contact-details').hide(); } From f201e6563df3947c467f147cf376af05fc7b6d92 Mon Sep 17 00:00:00 2001 From: Ashtn Date: Mon, 12 Jun 2017 09:28:56 -0700 Subject: [PATCH 5/5] updated based on instructor feedback --- src/app/views/rolodex_view.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/views/rolodex_view.js b/src/app/views/rolodex_view.js index a5320ef..8750a48 100644 --- a/src/app/views/rolodex_view.js +++ b/src/app/views/rolodex_view.js @@ -63,8 +63,8 @@ var RolodexView = Backbone.View.extend({ displayModal: function(contact){ - $('#contact-details').empty(); - $('#contact-details').show(); + this.$('#contact-details').empty(); + this.$('#contact-details').show(); var generatedModalTemplate = this.modalTemplate(contact.attributes); @@ -75,8 +75,8 @@ var RolodexView = Backbone.View.extend({ }, hideModal: function(event){ - if($('#contact-details').has(event.target).length === 0 && !$('#contact-details').is(event.target)){ - $('#contact-details').hide(); + if(this.$('#contact-details').has(event.target).length === 0 && !this.$('#contact-details').is(event.target)){ + this.$('#contact-details').hide(); } } });