Overview

Skeleton

Project structure

  • Host
    • + Application Name
      • app
        • controller
        • model
        • public
          • images
              default-images
          • font
          • media : This folder contain individual user resources { images,video,text files }
        • view
          • .html file : all layout files reside here
          • Render
            • .html file : all final html page.
            • .js file : all dynamic dot template resiede here.
      • auth : authentication.js file (Recommanded to check session here )
      • seo
        • sitemap.xml
        • robots.txt

Working with ajax

Jswalker Ajax is damn easy and useful it is built around plain javascript ajax wrapper 


jswalker_obj.wire({ url:"url",type:"POST",ziel:{hello:"Hi jswalker"},
  success:function(success_op){
      console.log(success_op);
  },
  fail:function(fail_op){
    console.log(fail_op);
  } 
});
Wire

Function to use ajax library

url

No need to explain : pass url with controller and method combination

type

Type of request : default is post

ziel

Ziel : is represent data in jswalker

Working with Socket

Jswalker Booster responsible for call socket code : only difeference with wire and booster is that wire call controller/model fashion but booster call direct model 


jswalker_obj.booster({ model:"model-name",method:"method=name",ziel:{hello:"Hi jswalker"},
  success:function(success_op){
      console.log(success_op);
  },
  fail:function(fail_op){
    console.log(fail_op);
  } 
});
booster

Function to use socket library

model

Direct model name in jswalker

method

Method name inside model

ziel

Ziel : is represent data in jswalker

Callback of wire and booster

Success

success_op contain following object : 

{
 status:{ flag:"success" , info:""} ,
 ziel:{ hello:"Hi from jswalker server"}
}

Fail

fail_op contain following object : 

{
 status:{ flag:"fail" , info:{
  controller_name:"controller-name",
  controller_line_number:101,
  model_name:"model-name",
  model_line_number:101,
  trace_line:"#c(controller-name)"
  error_stack:"Full Error Stack"
 },
 ziel:{}
}

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