Building single page applications easily with cowhite.js

Posted by: bhaskar 6 years, 6 months ago

(Comments)

In this tutorial, I will explain you how to build single page applications easily using cowhite.js.

Links:

Opensource code at github - https://github.com/cowhite/Cowhite.js.

Documentation at https://cowhitejs.readthedocs.io.

Download link of cowhite.js - https://github.com/cowhite/Cowhite.js/blob/master/cowhite.js. (Dont embed this link in website, instead download and use)

What is Cowhite.js ?

Cowhite.js is a small jquery library that we developed to make our work easier. We have built the following features in Cowhite.js:

1. Build single page applications(spa)
2. Submit forms  
3. Button actions

1. Build single page applications(spa):

Lets say we are building a single page application where we have the urls which when opened, load the main content without re-loading staticfiles etc. Let these pages be page1, page2 and page3. Then the urls will be of the format:

example.com#page1
example.com#page2
example.com#page3

To make this work, we need to add below html:

<div id='page1-section' class='each-section hide' >
    <p>Page 1 content here</p>
</div>
<div id='page2-section' class='each-section hide' >
    <p>Page 2 content here</p>
</div>
<div id='page3-section' class='each-section hide' >
    <p>Page 3 content here</p>
</div>

Then, if you open the url http://yourdomain.com#page1, then the content inside page1-section will be visible.

2. Load and insert data automatically from remote url:

In the previous example, we are simply switching between pages/sections and then the static content present inside each page/section is displayed. Here, we will show how to load data from remote url automatically, that is, without writing code for loading content.

<div id='page1-section' class='each-section hide'  data-url="https://cowhitejs.cowhite.com/assets/data/items_list.html">
<div id='page1-content'></div>
</div>

Whenever a page/section is loaded, it will look for data attribute "url", that is, data-url. And then will make an ajax call to that url and inserts the result into the html element with id "page1-content". Here page1 is the page name/hash name with section id as "page1-section". This is useful when you simply want to load some remote html when loading a page.

3. Load data from remote url automatically but render that content to the dom manually:

This is useful when the response is JSON/XML but not html. You need to write a callback and then add the data attribute data-callback to the section like below:

    <div id='page1-section' class='each-section hide'  data-callback="loadPage1Callback" data-url="https://marketing.cowhite.com/api/v1/items/">
        <div id='page1-content'></div>
    </div>

Code for callback in javascript:

function loadPage1Callback(res){
  var html = "", $page1ItemHtml = $("#page1-template"), page1ItemHtml;
  for(var i=0; i<res.results.length; i++){
    page1ItemHtml = $page1ItemHtml.html().replace(/ITEM_ID/g, res.results[i].id).replace(
      /ITEM/g, res.results[i].name);
    html += page1ItemHtml;
  }
  if(!res.results.length){
    html += "<div>No items yet.</div>"
  }
  $("#page1-content").html(html);
}

4. Load content/data manually:

There may be situation when you want to do things on your own when a particular page is loaded. Then we can use the events fired when a page is loaded.

If the page with hash "page1" is loaded, then the event fired is "page1-opened".

We can write html like this:

     <div id='page1-section' class='each-section hide' >
         <div id='page1-content'></div>
     </div>

Write code in javascript that catches the event "page1-opened" that cowhite.js fired

$(document).on("page1-opened", function(){
    // write code here    
   // For example, you can make ajax call to some url and insert that response to the dom(any element as you wish)
});

You can look more of the documentation at https://cowhitejs.readthedocs.io.

Comments

Recent Posts

Archive

2022
2021
2020
2019
2018
2017
2016
2015
2014

Tags

Authors

Feeds

RSS / Atom