Functional State - HTML

overview

Typically you wont need to use an HTML component with the Functional State API. This is because you specify your HTML first, and then specify where your components should be rendered. But there are cases where you may want use an HTML component.

Plain HTML


A simple way to construct an HTML component is just to create an object with an $html method that returns the HTML. You can 


let html = {
  target:'content',
  $html()=>'HTML goes here'
}


HTML from a URL





let html = html.url('http://www.server.com/template.html');
dv.render(html, {target:'content'});


The following is an example of retrieving data from the following link

Dynamic HTML


The dynamic HTML component provides the above functionality, but also utilizes the dynamic text specification in order to provide data binding. 


let rd = await import("/lib/functional-state/v1.0.0/functional-state.mjs");
let html = await import("/lib/functional-state/library/v1.0.0/html.mjs");

let data = {
  $process:($val)=>{
    $val.set('obj', {
      message:'hello world'
    });
  }
};
let text = html.html('The message is {=  $val("obj").message =}');
            
rd.render([data, text],{target:'content'});


You can set the target on the text component by passing it in as an optional argument. 



let text = html.html('The message is {=  $val("obj").message =}', {
  target:'content'
}});
            
rd.render([data, text]);


Dynamic HTML -Using Modules






import("/lib/davinci/v1.0.0/davinci.mjs").then(async (dv)=>{
  let ht = await import("/lib/davinci/library/v1.0.0/html.mjs");
  let html = ht.html(`{: let ts = await import('/lib/davinci/library/v1.0.0/test.mjs');
  print(ts.hello()) :}`,{ target:'content1'});
  dv.render(html);
});
					






import("/lib/davinci/v1.0.0/davinci.mjs").then(async (dv)=>{
  let ht = await import("/lib/davinci/library/v1.0.0/html.mjs");
  let html = ht.html(`{= ts.hello() =}`,{ target:'content1', modules:{ ts : '/lib/davinci/library/v1.0.0/test.mjs'}});
  dv.render(html);
});


Contents