Modularization And Logics

• modularization
  • dependency injection
  • customize module loading
• implement logics
  • force data synchronize
  • built-in event binding via JQuery
  • delay actions
  • ajax via JQuery

modularization

Modularization is necessary for modern javascript applicaitons and Asta4js allows developers to work with any existing module loader such as requirejs or any others.

dependency injection

Although you can make use of any extra module loader indenpently from Asta4js, Asta4js has built-in depedency injection for module loading.

Asta4js use requirejs as default module loader but without requirejs source included, thus you should have to introduce requirejs by yourself. Once requirejs is included in the current page, you can inject the modules by Aj.init:

Aj.init(["xService", "yService"], function (xService, yService, $scope) {
  ...
});

customize module loading

As introduced above, Asta4js use requirejs as default loader but any extra loader can be configured as following:

Aj.config.moduleRequire = function(modName, callback){
  //AMD style
  require(modName, callback);
  //or commonjs style
  callback(require(modName));
};

implement logics

Currently Asta4js is designed to work with JQuery which will handle the user actions and communication with servers.

force data synchronize

Not only JQuery, but also all extra libraries which are used to change values of binding targets, the force data synchronization is necessary:

$("#toggle-all").click(function(){
  $scope.data.list.forEach(function(t){
    t.complete = $scope.uiControlData.allCompleted;
  });
  Aj.sync();
});

"Aj.sync()" is a helper function to notify Asta4js to perform force synchronization from model to DOM, which is necessary after all the operations which changed the status/value of current page except the following sync-awared situations built-in by framework.

built-in event binding via JQuery

Developers can use the built-in event binding api to avoid explicit calling of "Aj.sync()". The built-in binding apis are basically the simple wrapping of JQuery's event apis:

//static binding on global operations
$scope.snippet("#todoapp")
  .bind("#new-todo", "keypress",  function(e){
    ...
  }).bind("#toggle-all", "click", function(){//mark all complete/uncomplete
    ...
  }).bind("#clear-completed", "click", function(){//clear all completed
    ...
  });

//dynamical binding generated array items
$scope.snippet("#todoapp")
  .on("dblclick", ".x-todo-item", function(){//double click to edit
    ...
  }).on("blur", ".x-todo-item", function(){//blur to exit edit
    ...
  }).on("keypress", ".x-todo-item", function(e){//enter to exit edit
    ...
  }).on("click", ".destroy", function(){ //click to destroy current item
    ...
  });

See the real sample of TodoApp

delay actions

The automatically 2-way binding may become complicated if we change the variables' value in event handlers, to simplify the situation, developers can delay on operations by "Aj.delay()" which is basically a wrapper of "window.setTimeout" with some helpful specification:

Aj.delay = function(callback, timeout, delayMoreCycles){...}

• Aj.sync() will be invoked implicitly
• delay cycles can be specified to make warranties that all the value changes has finished.

$("#toggle-all").click(function(){
  Aj.delay(function(){
    $scope.data.list.forEach(function(t){
      t.complete = $scope.uiControlData.allCompleted;
    });
  });
});

ajax via JQuery

Asta4js will configure the JQuery to invoke "Aj.sync()" automatically after all the ajax requests, so you can just simply use JQuery's ajax apis in standard way:

//data initialization
$.ajax({
  type: "get",
  url: "test.json",
}).done(function(data){
  $scope.data.list = data;
});

If you want to disable the automacially "Aj.sync()" calling, add the following configuration to your document ready handler:

Aj.config.autoSyncAfterJqueryAjax = false;