@default-js/defaultjs-html-renderer
v1.3.3
Published
This is a html web component to render html by using defaultjs-template-language.
Readme
defaultjs-html-renderer
Intro
This a web component, that allows you, to render a html file or a template file into your website. The rendering would be executed dynamicly on client at brower. This supports a easy way of client side rendering, additial by using remote data.
How to include
NPM
//import html renderer element
import { HTMLRendererElement } from "@default-js/defaultjs-html-renderer"Script Tag
<html>
<head> ...</head>
<body>
<d-renderer template="template.tpl.html"></d-renderer>
//script file is located at dist directory
<script type="application/javascript" src="/path/to/browser-bundle-defaultjs-html-renderer.min.js" />
</body>
</html>How to use
Include the d-renderer tag into your html body and
- define the path to a template by attribute
template. - define a selector of a
HTMLTemplateElementby attributetemplate. - define a template as content of
d-renderer.
<d-renderer template="/path/to/template/file.tpl.html"></d-renderer>
<d-renderer template="#MyTemplate"></d-renderer>
<d-renderer>
<!-- use content as template definition -->
</d-renderer>Overview of all Attributes
Attribute | Default | Description
-----------------|-----------|---------
template | | URL string or dom selector string
render-mode | replace | Defines, how the rendered content be included. Values [append, prepend, replace, self-replace]
data | | URL string to load additional data
condition | | define an Expression, under what condition the renderer would be executed
initial-run | true | if the value false, you must execute the rendering by javascript or by an Event <- see other attributes
include-only | | if this attribute präsent, then the renderer would include the template without processing
listen-event | | define an Event, if this Event triggert the renderer would be executed. Combine this with initial-run=false
listen-element | | define a dom selector string on witch element an event be observed
trigger-event | | define an Event there be triggered if the rendering process finished
<d-renderer template="/path/to/template/file.tpl.html" data="/path/to/data/file.json" render-mode="[append|prepand|replace|replace-self]"></d-renderer>
<!-- render a template file into the d-renderer tag by replacing the content of d-renderer tag -->
<d-renderer template="/path/to/template/file.tpl.html"></d-renderer>
<d-renderer template="/path/to/template/file.tpl.html" render-mode="replace"></d-renderer>
<!-- render a template file into the d-renderer tag by appending -->
<d-renderer template="/path/to/template/file.tpl.html" render-mode="append"></d-renderer>
<!-- render a template file into the d-renderer tag by prepending -->
<d-renderer template="/path/to/template/file.tpl.html" render-mode="prepend"></d-renderer>
<!-- render a template file and replacing the d-renderer tag with the rendered content -->
<d-renderer template="/path/to/template/file.tpl.html" render-mode="self-replace"></d-renderer>
<!-- fetch and render remote json data with a template file into d-renderer tag -->
<d-renderer template="/path/to/template/file.tpl.html" render-mode="/path/to/data/file.json"></d-renderer>How do define a template
If you want to learn, "How to define a template?", read the documentation of defaultjs-template-language.