MVC

Jswalker is stick with One of the great architectre in programming language

Model

MVC MODEL ! NOT WRITTEN

Controller

Location file

Every controller put inside controller folder and nested controller also support in jswalker with or without method

hello.js (basic)


var hello = {
    index:function(op,output){
      output({page:"hello.html",ziel:{data:10} });
    }
};
module.exports = hello;

hello.js (Ajax)


var hello = {
    index:function(op,output){
      output({status:{flag:"success",info:""},ziel:{} });
    }
};
module.exports = hello;

hello.js (Call model)


var hello = {
    index:function(op,output){
      var system_op = op;   // this is very handly  if you want op within  function as standard variable
      var model = op.model;   // get model object to call model

      var hello_model = model.get(system_op,"hello-model");  // load model

          hello_model.say_hi(system_op,function(hello_op){
            console.log(hello_op);
          });
    }
};
module.exports = hello;
get

get is system method to load model and it only require system_op that contain necessary value in it



callback

callback contain the specific result set which is sent by model (we will later discuss in model section)
hello_op contain


 {
   status:{
     flag:"success | fail ",
     info:"If error"
   },
   ziel:{} // contain ziel object of model
 }
 

hello.js (Full example with ajax)


var hello = {
    index:function(op,output){
      var system_op = op;   // this is very handly  if you want op within  function as standard variable
      var model = op.model;   // get model object to call model

      var hello_model = model.get(system_op,"hello-model");  // load model

          hello_model.say_hi(system_op,function(hello_op){
            callback(hello_op);
          });
    }
};
module.exports = hello;
Note: If we don not want any data adjustment or manipulation at server side
we can directly call callback(hello_op); in case of ajax

hello.js (Full example with http request)


var hello = {
    index:function(op,output){
      var system_op = op;   // this is very handly  if you want op within  function as standard variable
      var model = op.model;   // get model object to call model

      var hello_model = model.get(system_op,"hello-model");  // load model

          hello_model.say_hi(system_op,function(hello_op){
            if(hello_op.status.flag=="success"){
              callback({ page:"hello.html",ziel:{data:[1,2,3]} });
            }else{
               callback({ page:"error.html",info:hello_op.status.info }); // Info must for trace error in console or in development mode
            }
          });
    }
};
module.exports = hello;


View

Working with Rendering

Rendering process of jswalker cut down into two parts

Note: This processs is very crucial and hard to understand because
it is directly affect the rendering speed and performance ,
Recommanded way is to understand demo code and try to understand from direct code
and get idea of every chunk of code in documentation.

  • Server side
  • Client side (Recommanded)
Rendering process in jswalker simillar to express-dot template engine
  • view
    • render
      • hello
      • hello.html
      • hello.js
    • hello.html

Hello.html in view directory


---
layout: render/demo/demo.html
title: Jswalker demo project
---


<!-- Head block -->
[[##head:
<head>
<title>[[= layout.title ]]</title>
<link rel='stylesheet'  href='[[=model.base.css]]/demo.css' />
</head>
#]]
<!-- Head block -->


<!-- Common block -->
[[##header:
  [[= partial('render/common/header.html') ]]
#]]

<!-- Common block -->



<!-- Script block -->
[[##script:
<script type='text/javascript' src='[[=model.base.js]]/jswalker-core.js' ></script>
<script type='text/javascript' src='[[=model.base.js]]/jquery-2.2.4.js' ></script>
<script type='text/javascript' src='[[=model.base.js]]/demo.js' ></script>


[[= partial('render/demo/demo.js') ]]


#]]

Top level Three dash line --- on top of html page is very crucial inside this block tells the dot parser where to push this layout in this case view/render/hello/hello.html

model:

model contain all ziel data and some additonal data set by server. like model.base is set by jswalker to get script | style | image | media path and all variable sent by server used via model.variable name

[[##:

Block denoted by this will later used in html file to push that chunk into html,there is one special partial it will load html code or script code from other file
useful for mini html code like header and footer and also include script file that contain dot template for dynamic html generation.

hello.html(render/hello/hello.htlml)

Every layout values now dump here




<html>

[[=layout.head]]

<body>
   <div>
    [[=model.data.value]]
   </div>
</body>

[[= layout.script]]

</html>


layout

layout variable contain all small portion that set in earliest layout html file like head tag , header and footer Note: Script file also include here which contain dynamic dot template engine

hello.js(render/hello/hello.js)

Contain dot scripts are reside here related to page

Note: Only difference here is that
sever side template engine denoted with [[
client template denoted with {{


 try{
  dot_obj.chunk['demo_init']="{ for(var i=0;i<it.length;i++) {  }}"+

    "<p>Test value : {{=it[i].test_value}} </p>"+

    "<p>Test string : {{=it[i].test_string}} </p>"+

  "{{ } }}";
  
}catch(err){
   console.log(err);
}

Use following template in js file or any other script file.


  var data=[
   {test_value:1,test_string:'hi'},
   {test_value:2,test_string:'hi'}
  ]; // Suppose this variable contain data which came from server

  var demo_template=doT.template(dot_obj.chunk['demo_init']); // get template chunk and compile in function
  var html=demo_template(data);  // pass data into cimpiled function 
  $("body").html(html); // Push html content to body