Underscore JS

Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's.
  • Javascript Utility Library
  • lProvides support for functional programming
  • lComplementary
  • lUnobtrusive
  • lFlexible
What Does it  Do:
  •     Files in holes in the language
  •     Provides the Functional support
  •     Makes you happier writing Javascript
How to work with Undescore.js

step 1 : Download underscore js from http://underscorejs.org/
Downloads (Right-click, and use "Save As")
Development Version (1.1.3) 26kb, Uncompressed with Comments

Production Version (1.1.3) 3kb, Packed and Gzipped (or) CDN

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js">
</script>
  1. <!DOCTYPE html>
  2. <title>Underscore example</title>
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"</script>;
  5. </head>
  6. <body>
  7. <h1>Student Profile</h1>
  8. <p>FName : Bhaskar</p>
  9. <p>LName :Ravva</p>
  10. <p>Email : bhaskar1234@gmail.com</p>
  11. <p>Phone :0987654321</p>
  12. </body>
  13. </html>
Step 3 : The static data convert into dynamic data,every html tag convert into <%=   = > 
  1. <!DOCTYPE html>
  2. <head>
  3. <title>Underscore example</title>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"</script>;
  6. </head>
  7. <body>
  8. <h1>Student Profile</h1>
  9. <p>FName :<%= fname %></p>
  10. <p>LName :<%= lname %></p>
  11. <p>Email : <%= mail %></p>
  12. <p>Phone :<%= phone %></p>
  13. </body>
  14. </html>
Step 4: when we create the demoTemplate object by calling
demoTemplate = _.template(templateText).
(In fact, this is the only time we call Underscore directly in the whole example.) 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <title>User Profile Page</title>
  4. <meta charset="utf-8">
  5. <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
  6. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js "></script>
  7. <script>
  8. window.onload = initPage;
  9. function initPage() {
  10. var exampleValues = {},
  11. parsedTemplate = "",
  12. templateText = $('#profileTemplate').html(),
  13. demoTemplate = _.template(templateText);
  14. $.ajax({url: "data/profiledata.json", async: false, dataType: "json", success: function(json) {exampleValues = json;}});
  15. parsedTemplate = demoTemplate(exampleValues);
  16. $("#profileBlock").html(parsedTemplate);
  17. }
  18. </script>
  19. </head>
  20. <body>
  21. <div id="profileBlock"></div>
  22. <script id="profileTemplate" type="text/template">
  23. <p>FName :<%= fname %></p>
  24. <p>LName :<%= lname %></p>
  25. <p>Email : <%= mail %></p>
  26. <p>Phone :<%= phone %></p>
  27. </script>
  28. </body>
  29. </html>

download complete example : clickhere

(e) Book free download : clickhere

(e) Template clickhere




Previous
Next Post »