TechHeap

November 28, 2016

Example of using Models in Backbone JS

Models are data container where we can also add logics to data like validations, conversions or any specific computation if requires.

In this post we will understand how can we create our own Model Class and then create methods under it with data variables to contain the data.

Example:

Books Model Class

 var bookModel = Backback.Model.extend({});

The above code will create a plain Model class of object bookModel. Now lets create some variables and set values into that.

 bookModel.set({bookName: "BackBone", noOfPages: 80});

the above line will create 2 variables under bookModel Model Object.

To create a function under it, we can do while creating the Model class. For example:

 var bookModel = Backback.Model.extend({  
      publishBookPrice : function (){  
           alert("the price of this book is 200 INR");  
      }  
 });

November 26, 2016

Backbone JS Event ON example

ON Event

Syntax: object.on(event, callback, [context])
It will bind a callback function to an object. The callback will be invoked whenever the event is fired or triggered. We can bind single or multiple events in the same object to get it triggered.

Example with single event:

 <!DOCTYPE html>  
   <head>  
    <title>Event On Example</title>  
      <script src="jquery-3.1.1.min.js" type="text/javascript"></script>  
      <script src="underscore-min.js" type="text/javascript"></script>  
      <script src="backbone-min.js" type="text/javascript"></script>  
   </head>  
   <body>  
    <script type="text/javascript">  
         //Here creating an object 'myVal' and extending with Backbone.Events method  
      var myVal = _.extend({name:'Hello World'}, Backbone.Events);  
      // The on() method will bind callback function to an object and invoked whenever an event triggers  
      myVal.on('myFunc', function () {  
       alert(this.name);  
      });  
      //It triggers the 'myFunc' event on object 'myVal'  
      myVal.trigger('myFunc');  
    </script>  
   </body>  
 </html>

Example with multiple event:

 <!DOCTYPE html>  
   <head>  
    <title>Event On Example</title>  
      <script src="jquery-3.1.1.min.js" type="text/javascript"></script>  
      <script src="underscore-min.js" type="text/javascript"></script>  
      <script src="backbone-min.js" type="text/javascript"></script>  
   </head>  
   <body>  
    <script type="text/javascript">  
      //Here creating an object 'myVal' and extending with Backbone.Events method  
      var myVal = _.extend({name:'Hello World'}, Backbone.Events);  
      // The on() method will bind callback function to an object and invoked whenever an event triggers  
      myVal.on('change hide', function (message) {  
       alert(this.name + message);  
      });  
      //It triggers the 'change' event on object 'myVal'  
      myVal.trigger('change', ' with change trigger');  
      //triggers the 'hide' event on object 'myVal'  
      myVal.trigger('hide', ' with hide trigger');  
    </script>              
   </body>  
 </html>

July 20, 2016

How to navigate between multiple pages in a mobile app using Ionic

To create a simple navigation for a mobile application using ionic framework, we would require ion-nav-view directive.

Along with this we need to implement angular's configuration through $stateProvider and $urlRouterProvider.

Using this, we can allow user to move from one html page to another, also segregate each page functionalities by defining separate controller for each page.

Example:

Lets create 3 html pages in which we will allow user to navigate the app into each other.

Home.html Source Code

1:  <ion-view view-title="Home">  
2:       <ion-content class="padding">  
3:       <p>  
4:            <a class="button" href="#/facts">Scientific Facts</a>  
5:       </p>  
6:       </ion-content>  
7:  </ion-view>

Facts.html Source Code

1:  <ion-view view-title="Facts">  
2:      <ion-content class="padding">  
3:       <p>Banging your head against a wall uses 150 calories an hour.</p>  
4:       <p>Dogs have four toes on their hind feet, and five on their front feet.</p>  
5:       <p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>  
6:       <p>A cockroach will live nine days without it's head, before it starves to death.</p>  
7:       <p>Polar bears are left handed.</p>  
8:       <p>  
9:        <a class="button icon ion-home" href="#/home"> Home</a>  
10:        <a class="button icon icon-right ion-chevron-right" href="#/facts2">More Facts</a>  
11:       </p>  
12:      </ion-content>  
13:     </ion-view>

Facts2.html Source Code

1:   <ion-view view-title="Also Factual">  
2:      <ion-content class="padding">  
3:       <p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>  
4:       <p>1 in every 4 Americans has appeared on T.V.</p>  
5:       <p>11% of the world is left-handed.</p>  
6:       <p>1 in 8 Americans has worked at a McDonalds restaurant.</p>  
7:       <p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>  
8:       <p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>  
9:       <p>  
10:        <a class="button icon ion-home" href="#/home"> Home</a>  
11:        <a class="button icon ion-chevron-left" href="#/facts"> Scientific Facts</a>  
12:       </p>  
13:      </ion-content>  
14:     </ion-view>

Index.html Source Code:

1:  <html ng-app="ionicApp">  
2:   <head>  
3:    <meta charset="utf-8">  
4:    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
5:    <title>Navigation Example</title>  
6:    <link href="css/ionic.css" rel="stylesheet">  
7:    <script src="js/ionic.bundle.js"></script>  
8:       <script src="app.js"></script>  
9:   </head>  
10:   <body>    
11:    <ion-nav-bar class="bar-positive">  
12:     <ion-nav-back-button>  
13:     </ion-nav-back-button>  
14:    </ion-nav-bar>         
15:    <ion-nav-view></ion-nav-view>         
16:   </body>  
17:  </html>

App.js Source Code

1:       angular.module('ionicApp', ['ionic'])  
2:       .config(function($stateProvider, $urlRouterProvider) {  
3:        $stateProvider  
4:            .state('home', {  
5:                 url: "/home",  
6:                 templateUrl: "home.html",  
7:                 controller: 'HomeCtrl'   
8:            })  
9:            .state('facts', {  
10:                 url: "/facts",  
11:                 templateUrl: "facts.html"                 
12:            })  
13:            .state('facts2', {  
14:                 url: "/facts2",  
15:                 templateUrl: "facts2.html"                 
16:            });  
17:       // if no above URL matches it will redirect to below path
18:         $urlRouterProvider.otherwise("/home");  
19:       })  
20:       .controller('HomeCtrl', function($scope) {  
21:        console.log('in HomeCtrl');  
22:       });

Demo on CodePen

Source Reference: http://ionicframework.com/docs/api/directive/ionNavView/