JQuery and Mustache: Awesome Combo for UI Management - Part 1

"JQuery and Mustache working together and doing wonders"

When it is the question about how fast you can make your page rendering and execution. Than question comes how to transfer content faster from server to client? How to reduce size of the content to be transferred? Part 1 is more towards JQuery and little bit about Mustache. in the Part 2 you will see more about Mustache.

We’ll look at how to add jQuery to your pages so you can use it. We will then look at how we select and interact with elements on the page and in the end , we’ll have an Introduction to Mustache, about what it is.

Jquery

Jquery is cross-platform JavaScript Library. From cross-platform i mean, the things done with Jquery are going to run on every browser. Today, we have CSS3 in competiton with Jquery , but CSS3 might not be supported by all browsers. Jquery enables front end developers to program in view layer of the project. It is responsible for making any web project UI friendly.

Feature List

  • It is relatively easy to make DOM manipulations in Jquery than Javascript.
  • With Jquery, you can “Write Less and Do more”.
  • The only thing is that you need to select an element and do domething on it.
  • The thing you can do with Jquery are: Animations Communicate with Server ** DOM Manipulation
  • Under DOM manipulation, you can do things like: Read the contents of an element Modify the DOM appearance
  • You can create Jquery Plugins, which are extensible i.e you can extend its functionality

Things you would need to get started with Jquery

  • Jquery Library – Download a copy of the jquery JS file and store it on your hard drive and reference the JS file in your HTML using attribute or you can use google or microsoft provided hosted libraries like
linenos: false
1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

. Now as you have JQuery library in your HTML, you can play with Jquery features. But remember you can do things with Jquery till your whole HTML Document is loaded. . To make sure your Jquery code will run after HTML page ready, you need to wrap your Jquery code inside “ready” function of the document.

1
2
//Syntax: 
$(document).ready(function() {});

function inside ready function of Document is anonymous function, function with no name, is a callback function. That means after your Document is loaded completely, call back function will be executed, it will execute every thing you write inside thing callback function of ready function.

Lets modify the contents of DOM element using Jquery.

“Sample HTML”
1
2
<span id="stuff"></span>
<form><input id="inpt" onchange="doit()"></form>
1
2
3
4
5
6
7
<script>
$(document).ready(function() {
function doit() {
   $("#stuff").text($("#inpt").val());
}
} );
</script>

Inside function doit, $(‘#stuff’) will return html node with id “stuff”. text() is used here to change the text of some element returned on left side of ‘dot’. text() is getting the value of element with id “inpt”. i.e with $(‘#inpt’) and using val() will return the value of input box.

Lets do some animation using jquery

Jquery has some functions for hiding DOM elements or showing them.

  1. show() is used to show a hidden HTML element.
1
2
$('.show').show();
//All elements with show class will become visible if they are hidden
  1. hide() is used to show a hidden HTML element.
1
2
$('.show').hide();
//All elements with show class will be hidden.
  1. toggle() is used to show a hidden HTML element.
1
2
$('.show').toggle();
//It will show if the element is hidden or vice-versa

You can also change the appearance of DOM elements using Jquery. You can do this in two ways. Either you can define your css classes and add or remove them dynamically using jquery functions ‘addClass’ or ‘removeClass’ functions or you can add styles to an element using ‘css’ function. Lets try both ways.

Using Css function

“CSS Code”
1
.style1{color:red}
“Here is the HTML code”
1
<div id=”hello” class=”style1” >Hello</div>

It will display Hello in red color. Now , lets change its color using css function.

1
$(‘#hello).removeClass(style1).css(color,green);

Note: In the same way, you can define multiple css properties in key value pair. Using this approach can be benefited if you have to change a single attribute on a single element in a DOM

Adding or removing classes

“Lets define our CSS to be used”
1
2
.style1{color:red}
.style2{color:green}
“Here is the HTML code”
1
<div id=”hello” class=”style1”>Hello</div>

It will display Hello in red color. Now lets change its color. First you need to get the element using id attribute $(‘#hello’) and then remove class style1 and add class style2

1
  $(‘#hello).removeClass(style1).addClass(style2);

Note: You are not supposed to use ‘.’ while writting class name. As you can see , these functions have only class names as parameters without ‘.’ operatior.

Using this approach can be benefited if you have to change many attributes of an element to multiple elements in a DOM

Introduction to Mustache

Mustache is logic-less templating scheme. From logic-less, i mean it does not have any programming constructs i.e no if-else, no loops. All it has is tags, which can be replaced by values or no value or series of values. A logic-less template contains holes for you to fill, and not how you fill them. The logic is placed elsewhere i.e in controller Layer and mapped directly to the template via ajax calls. Available in Javascript, PHP, ruby and python Mustache is available in all popular languages to work with.

Mustache template syntax
1
2
<p>{{input}}</p> 
<!--{{input}} will be replaced with its value-->

Now that you have undertand the basics of Jquery and Mustache, In the second part of this blog, i will get you dive more deeper in Mustache and how to interact with jquery.

Comments