API tools faq
paste
Advertisement
jcreamer898

knockoutjs issue from stack overflow

jcreamer898
Feb 23rd, 2012
577
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.45 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  6. <script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
  7. <script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
  8. <script>
  9.     // Contacts Knockout Model
  10. var contactsModel = {
  11.     //contacts: ko.observableArray([]),
  12.     contactsLoaded: ko.observable(false),
  13.     contactLoaded: ko.observable(false),
  14.     photo_src: ko.observable('http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png'),
  15.     fname: ko.observable(),
  16.     lname: ko.observable(),
  17.     email: ko.observable(),
  18.     full_name: function(fname, lname, email) {
  19.         // For email contacts w/o names, say no name and not null
  20.         var full_name = email;
  21.         if (fname !== null && lname !== null) {
  22.             full_name = fname + ' <b>' + lname + '</b>';
  23.         }
  24.         return full_name;
  25.     },
  26.     contactsByLetter: ko.observableArray(),
  27.     letterIndex: {}
  28. };
  29.  
  30. //add a contact in the right spot under the right letter
  31. contactsModel.addContact = function(newContact) {
  32.     //grab first character
  33.     var firstLetter = (newContact.lname || "").charAt(0).toUpperCase();
  34.     //if it is a number use #
  35.     if (!isNaN(firstLetter)) {
  36.         firstLetter = "#";
  37.     }
  38.    
  39.     //do we already have entries for this letter
  40.     if (!this.letterIndex[firstLetter]) {
  41.     //new object to track this letter's contacts
  42.         var letterContacts = {
  43.             letter: firstLetter,
  44.             contacts: ko.observableArray([])
  45.         };
  46.        
  47.         this.letterIndex[firstLetter] = letterContacts; //easy access to it
  48.        
  49.         //put the numbers at the end
  50.         if (firstLetter === "#") {
  51.             this.contactsByLetter.push(letterContacts);
  52.         } else {
  53.             //add the letter in the right spot
  54.             for (var i = 0, lettersLength = this.contactsByLetter().length; i < lettersLength; i++) {
  55.                 var letter = this.contactsByLetter()[i].letter;
  56.                
  57.                 if (letter === "#" || firstLetter < letter) {
  58.                      break;  
  59.                 }
  60.             }  
  61.             this.contactsByLetter.splice(i, 0, letterContacts);
  62.         }
  63.     }
  64.    
  65.     var contacts = this.letterIndex[firstLetter].contacts;
  66.    
  67.     //now we have a letter to add our contact to, but need to add it in the right spot
  68.     var newContactName = newContact.lname + " " + newContact.fname;
  69.     for (var j = 0, contactsLength = contacts().length; j < contactsLength; j++) {
  70.         var contactName = contacts()[j].lName + " " + contacts()[j].fName;
  71.        
  72.         if (newContactName < contactName) {
  73.            break;  
  74.         }
  75.     }
  76.    
  77.     //add the contact at the right index
  78.     contacts.splice(j, 0, newContact);
  79.        
  80. }.bind(contactsModel);
  81.  
  82.  
  83. var current_page = 1;
  84.  
  85. function ajaxContacts(callback) {
  86.    
  87.     /*
  88.     $.ajax({
  89.         url: '/echo/json/',
  90.         data: "page=" + current_page,
  91.         beforeSend: function() {},
  92.         success: function(dataJS) {
  93.  
  94.             console.log(current_page);
  95.             dataJS = dummydata(current_page);
  96.  
  97.             ko.utils.arrayForEach(dataJS.contactList, function(c) {
  98.                 contactsModel.addContact(c);
  99.                 //contactsModel.contacts.push(c);
  100.             });
  101.  
  102.             current_page = current_page + 1;
  103.  
  104.             if (dataJS.page < dataJS.total_pages) {
  105.                 ajaxContacts(callback);
  106.             }
  107.         }
  108.     });
  109.     */
  110.     ko.utils.arrayForEach(dummydata(1).contactList, function(c) {
  111.         contactsModel.addContact(c);
  112.         //contactsModel.contacts.push(c);
  113.     });
  114. }
  115.  
  116.  
  117. // Dummy Data
  118.  
  119.  
  120. function dummydata(page) {
  121.     return {
  122.         "total_pages": 10,
  123.         "page": page,
  124.         "contactList": [{
  125.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  126.             "lname": "Bond",
  127.             "id": 241,
  128.             "fname": "James",
  129.             "email": "xxx@yahoo.com"},
  130.         {
  131.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  132.             "lname": "Yor",
  133.             "id": 241,
  134.             "fname": "Sam",
  135.             "email": "xxx@yahoo.com"},
  136.         {
  137.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  138.             "lname": "Bond",
  139.             "id": 241,
  140.             "fname": "dames",
  141.             "email": "xxx@yahoo.com"},
  142.         {
  143.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  144.             "lname": "Yor",
  145.             "id": 241,
  146.             "fname": "Sam",
  147.             "email": "xxx@yahoo.com"},
  148.         {
  149.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  150.             "lname": "Aond",
  151.             "id": 241,
  152.             "fname": "dames",
  153.             "email": "xxx@yahoo.com"},
  154.         {
  155.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  156.             "lname": "Tor",
  157.             "id": 241,
  158.             "fname": "Sam",
  159.             "email": "xxx@yahoo.com"},
  160.         {
  161.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  162.             "lname": "yond",
  163.             "id": 241,
  164.             "fname": "dames",
  165.             "email": "xxx@yahoo.com"},
  166.         {
  167.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  168.             "lname": "Nor",
  169.             "id": 241,
  170.             "fname": "Sam",
  171.             "email": "xxx@yahoo.com"},
  172.         {
  173.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  174.             "lname": "Dond",
  175.             "id": 241,
  176.             "fname": "dames",
  177.             "email": "xxx@yahoo.com"},
  178.         {
  179.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  180.             "lname": "AAAor",
  181.             "id": 241,
  182.             "fname": "Sam",
  183.             "email": "xxx@yahoo.com"},
  184.         {
  185.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  186.             "lname": "LLond",
  187.             "id": 241,
  188.             "fname": "dames",
  189.             "email": "xxx@yahoo.com"},
  190.         {
  191.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  192.             "lname": "dor",
  193.             "id": 241,
  194.             "fname": "Sam",
  195.             "email": "xxx@yahoo.com"},
  196.         {
  197.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  198.             "lname": "zond",
  199.             "id": 241,
  200.             "fname": "dames",
  201.             "email": "xxx@yahoo.com"},
  202.         {
  203.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  204.             "lname": "Yor",
  205.             "id": 241,
  206.             "fname": "Sam",
  207.             "email": "xxx@yahoo.com"},
  208.         {
  209.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  210.             "lname": "Bond",
  211.             "id": 241,
  212.             "fname": "dames",
  213.             "email": "xxx@yahoo.com"},
  214.         {
  215.             "photo": "http://homepage.mac.com/millhouse/Family%20Tree/images/PersonListIcon.png",
  216.             "lname": "Car",
  217.             "id": 241,
  218.             "fname": "aames",
  219.             "email": "xxx@yahoo.com"}]
  220.     };
  221. }
  222.  
  223. $(function(){
  224.     ko.applyBindings(contactsModel, document.getElementById("view-panel-contacts"));
  225. });
  226. ajaxContacts();
  227.    
  228. </script>
  229. </head>
  230. <body>
  231. <div id="view-panel-contacts">  
  232.     <div id="contact-list" data-bind="template: { name: 'letterTmpl', foreach: contactsModel.contactsByLetter() }"></div>
  233. </div>
  234.  
  235. <script id="letterTmpl" type="text/html">
  236.     <div class="contact-header">
  237.         <span data-bind="text: letter"></span>
  238.     </div>
  239.    
  240.     <div data-bind="template: { name: 'contactTmpl', foreach: contacts }"></div>
  241. </script>
  242.  
  243. <script id="contactTmpl" type="text/html">
  244.     <div name="${id}" id="contact_${id}" class="contact-row">
  245.         <a href="#/contacts/${id}">
  246.             <div class="photo">
  247.                 <img src="${photo}" />
  248.             </div>
  249.             <div class="name">{{html contactsModel.full_name(fname, lname, email)}}</div>
  250.         </a>
  251.     </div>
  252. </script>
  253. </body>
  254. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!