Jswalker is stick with One of the great architectre in programming language
MVC MODEL ! NOT WRITTEN
Every controller put inside controller folder and nested controller also support in jswalker with or without method
var hello = {
index:function(op,output){
output({page:"hello.html",ziel:{data:10} });
}
};
module.exports = hello;
var hello = {
index:function(op,output){
output({status:{flag:"success",info:""},ziel:{} });
}
};
module.exports = hello;
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 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
}
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
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;
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.
---
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
Every layout values now dump here
<html>
[[=layout.head]]
<body>
<div>
[[=model.data.value]]
</div>
</body>
[[= layout.script]]
</html>
Note: Script file also include here which contain dynamic dot template engine
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);
}
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