Last modified by kashi on 2015/01/30, 12:50


In hifive, a "Logic" class is defined to execute:

  • complex calculation
  • communication with server
  • local DB manipulation

which are purely communication/calculation processes. View manipulation is not performed.

Since it focuses only on such processes, readability, maintainability, reusability and test simplicity should be improved.
Besides, by utilizing asynchronous processing (described in next chapter), implementation changes internal to logic
will not affect the controller.

Defining a logic class

Follow these steps to a define logic class:

1. Define a logic class

var dateLogic = {  
  __name: 'DateLogic',  
  dateFormat: '{0}/{1}/{2}',  
  getCurrent: function(time) {  
   var year = time.getYear();  
   var month = time.getMonth() + 1;  
   var date = time.getDate();  
   return this._format(year, month, date);  
  _format: function(year, month, date) {
   return h5.u.str.format(this.dateFormat, year, month, date);


  • Specifies a logic name. Similar to a controller class, this property is mandatory, without this error should appear.


  • Public method, starts with any character other than an underscore _.


  • Private method, starts with an underscore _.

2. Declare the logic class in the controller class.

var dateController = {  
  __name: 'DateController',  
  dateLogic: dateLogic,  
  __ready: function(context) {  
   var current = this.dateLogic.getCurrent(new Date());  
  • The code above declares logic used in this controller. A 'Logic' suffix is required.
  • The framework will automatically turn the specified logic into hifive logic object.

Implementation example

1. Write a HTML file.

<!doctype html>  
       <meta charset="UTF-8">  
       <script src="jquery.js"></script>  
       <script src="jquery.blockUI.js"></script>  
       <script src="ejs-1.0.h5mod.js"></script>  
       <script src="h5.js"></script>  
       <!-- Import your js file -->  
       <script src="step6.js"></script>  
       <title>hifive Step6</title>  
       <div id="container">  
           <input type="text" id="left" value="" /> +  
           <input type="text" id="right" value="" />  
           <input type="button" id="calc" value="=" />  
           <span id="result"> </span>  

2. Create a step6.js file.

$(function() {  
   // Define logic  
   calcLogic = {  
        __name: 'CalcLogic',  
        add: function(left, right) {  
           return left + right;  
   // Create object that is source of the controller  
   var controller = {  
       // Controller name  
       __name: 'CalcController',  
       // Declare logic  
       calcLogic: calcLogic,  
       '#calc click': function() {  
           // Get left side value  
           var left = this.$find('#left').val();  

           // Convert from String to Number. Exit if conversion fails
           left = parseInt(left);
           if (isNaN(left)) {
           // Get right side value  
           var right = this.$find('#right').val();  
           // Convert from String to Number. Exit if conversion fails.
           right = parseInt(right);
           if (isNaN(right)) {

           // Convert from String to Number. Exit if conversion fails.  
           try {  
                right = parseInt(right);  
            } catch(e) {  
           // Call add() method of CalcLogic  
           var ret = this.calcLogic.add(left, right);  
           // Display result to view.  
   // Bind controller to id="container" element  
   h5.core.controller('#container', controller);  

3. Open HTML file in browser.
4. Enter number value in both left side and right side, then click = button.

Checking operation


Members and methods of a logic class

The following method is added in a logic class.


Returns Deferred object.

Implementation example using Deferred will be described later.

Frequently asked question

Why shouldn't I perform view manipulation using logic?

Apart from communication & calculation processes, if logic is also used to execute view update process,
in case you wish to modify view structure (tags) or changing view style, you have to understand
JavaScript code thoroughly in order to make changes.
On the contrary, if communication/calculation processes are to be modified, since view manipulation is not separately handled, maintainability would be reduced.
Further more, if you define a complex tag structure using, for e.g: jQuery, you will hardly understand
how that may become. As result, this will also reduce maintainability.


  • although it may take time when you initially define view, and
  • even it is possible to manipulate view using logic as per specifications,
    it is highly recommended that you should follow the above suggestion.

Template engine is suggested to make view manipulation easier.

Separating logic and view manipulation will be much helpful for asynchronous processing (e.g, communication).

Refer to next chapter for detailed description about asynchronous processing.

Next Chapter ⇒ 06. Asynchronous processing


Refer to API document  for methods and members of logic.

If a logic definition object contains property that has same name with property that is to be added, it will be overwritten.

Copyright (C) 2012-2017 NS Solutions Corporation, All Rights Reserved.