khamsat khamsat khamsat

Attributes

haxcv built to help you to create the most complected projects by simple ways by using Dynamic Component or Single page Application etc..
anyway you don't need to select DOM Selector then create some content then insert it
another word all you need to do : just assign some attributes to do that for you

Events

when you assign Events attr this Events will work at all time even if render Component any element has Event attr will work .
fn-(event name)

Events :

fn-click

fn-keypress

fn-change

fn-focus

fn-blur


<button fn-click fn-exec="alert(new Date())"></button>   
<!-- alert Date with fn-click -->
    

as you see , this how you create Events , but the question is : why fn-click ? I can use onClick .
ok because it's all about components and storing and exec jsH so ,
and for that we used another attr (fn-exec) to exec js code
but if we add data to fn-click this data suppose to belong to target selector let's try to create new Example


<div myView ></div>   
<button fn-click="myView" value="render me to div">render</button>   
    

Try it :


<div myView ></div>   
<input fn-keypress="myView" />   
    

fn-init

fn-init attr used to compile jsH to JS

Note :

if you use fn-init in root elements you might lose your page controlling if you used external script as DOM Selector , Events because jsH is working after DOM load
so you better use fn-init in single elements (target element)

fn-init with Ajax

you can use fn-init in your response to compile result


<div myView >
 <a href="#contact">Contact Us</a>
 <a href="#about">About Us</a>
</div>      

<script type="text/javascript">
 var app = Router.View("myView");
app.createSPA({

  contact:{
    when:"home",
    title:"Contact Us",
    url:"contact.html"
  },
  about:{
    when:"about",
    title:"About us",
    url:"about.html"
  } , 
  noneOf:{    
    title:"page Not Found ",
    url:"/error/404.html"
  }
    
});
</script>   
    

about.html


<div myView >
<div fn-init >
<h1>About Us Page </h1>
{%
var date = new Date();
var desc = "Haxcv Founder : Manassa Joseph"
{{
   <h4>{{+date+}}</h4>
   <p>{{+desc+}}</p>
}}
%}
</div>
 <a href="#contact">Contact Us</a>
 <a href="#about">About Us</a>
</div>        
    

contact.html


<div myView >
<div fn-init >
<h1>Contact Us Page </h1>
{%
var Email = 'manassa@mail.com';
var Phone = '0987654323';
{{
   <h4>Email : {{+Email+}}</h4>
   <h4>Phone : {{+Phone+}}</h4>
}}
%}
</div>
 <a href="#contact">Contact Us</a>
 <a href="#about">About Us</a>
</div>        
    

fn-store

Used to set the variable value to a specified value according to the specified properties If an event is assigned the value of the same element or if an external component is used, the component content is assigned to the variable (fn-copy , fn-script , fn-call)

fn-copy

Used to include an external component with jsH Events Required (fn-click , fn-keypress , etc...)

fn-script

Used to include an external script component with jsH Events Required (fn-click , fn-keypress , etc...)

fn-call

Used to call variable or function with return value Events Required (fn-click , fn-keypress , etc...)

fn-exec

Used to exec function with return value Events Required (fn-click , fn-keypress , etc...)


<div fn-click fn-store="div" sel >hello from DIV</div>       
<div fn-click fn-store="div" fn-copy="sel">use above div </div>       
<div fn-click fn-store="div" fn-script="myScript">use script Component </div>       
<div fn-click fn-store="div" fn-call="div">use div variable </div>       
<div fn-click fn-store="div" fn-exec="myfun()">use function </div>       
<script type="text/javascript" >
function myfun(){ alert('hello');}
</script>
<script type="text/jsh" myScript >
{%
 {{
   <p>date is {{+new Date()+}}</p>
 }}
%}
</script>     
<div v-render="div">div var will be show here</div>  
    

v-render

Used to render variable to element with interval

v-scope

Used to render modules Scope data to element with interval fn-module Required , v-scope works if parent element has fn-module attr


<div v-render="new Date()"  ></div> 
<div fn-module="myApp"  >
  <div v-scope="myApp.name"  ></div> 
  <div v-scope="myApp.age"  ></div> 
</div> 

<script type="text/javascript" >
obj.module('myApp' , ($xes) => {
  myApp.name = "Manassa Jospeh";
  myApp.age = 23;
});
</script>
      

fn-module

Used to create module Components Application


<div fn-module="myItems"  >
  <div v-scope="myItems.name"  ></div> 
  <div v-scope="myItems.price"  ></div> 
  <div v-scope="myItems.description"  ></div> 
</div> 

<script type="text/javascript" >
obj.module('myItems' , ($xes) => {
  myItems.name = "haxcv eBook";
  myItems.price = '5.00 $';
  myItems.description = 'learn haxcv.......';

});
</script>
      

Events attributes

fn-click
fn-dblClick
fn-rightClick
fn-keypress
fn-change
fn-focus
fn-blur

fn attributes

fn-init
fn-store
fn-copy
fn-script
fn-call
fn-exec
fn-module
fn-append

v attributes

v-render
v-scope
v-define

v-define

v-define used to define global variables .
can be used with Events attr and after DOM load

v-define with js://var

you can assign with JS : ( Date , variables , functions )


 <div v-define="name=Manassa;pass=123;Email=manassa@mail.com" ></div>  
    

Using js://


 <div v-define="host=js://location.host; query=js://location.search;" ></div>  
    

<button  v-render="'update Date '+cms" v-define="cms=js://new Date()" fn-click  >update Date</button>
    

Try it :

me Selector with js://

me is target Element of v-define attr


<input v-define="data=js://me.value"  />
    

<input v-define="inputValue=js://me.value"  fn-keydown fn-keyup />
<div v-render="inputValue"></div>
    

Try it :

js:// elments :

name ----
me target Element
before previous Element
after next Element
par parent Element

fn-jsh :

Used to compile text label value to as jsH when you try to render textarea value to div if you need to compile result you need to define fn-jsh attr


<div my-view ></div>      
<textarea fn-keypress="my-view" fn-jsh ></textarea>
    

e-accept - e-newData :

when Element accept data or on render or Content has new Data unlike Events these attributes use on target Element


<p></p>
<div  e-accept="before.innerHTML = 'mission complete button'" target ></div>
<button fn-click="target" value="Hello I'm Div" >render</button>
    

e-newData

used when incoming data is not equal to current content


<div  e-newData="alert('new Data')" target ></div>
<button fn-click="target" fn-copy="textLabel" >render</button>
<input  textLabel />
    
khamsat khamsat khamsat khamsat