Cample
About
The Cample object is the starting point for the application. A new instance of the object is initialized in an HTML block, renders the components.
The application is rendered once. After this, it is updated by changing the data.
Class function
const newCample = cample("#page",{
trimHTML:false
});
Render method
In cample.js, rendering is done by creating a template, which contains the "data-cample" key attribute. This attribute is passed the value of the selector that was specified when the component was created. The selector in the component always comes as the first argument. Render example:
before render
<template data-cample="new-component"></template>
after render
<div>text<div>
component
const newComponent = component("new-component", "<div>text<div>");
If there was no "template" in the document that would contain the required "data-cample", then the component will not be rendered.
Arguments
selector
The HTML block in which the page will be rendered is initialized mainly due to the selector argument, which receives the value of the specified block. An example of a selector:
JavaScript file
new Cample("#page",{
trimHTML:false
})
.render("<span>text/<span>",{})
HTML file
<main id="page">
text
<main>
In this example, for the "main" HTML tag with a unique identifier "page", the text that was received in the "render" method is rendered.
options
The options object describes the property for applying the trim method to the rendered HTML.
trimHTML
Depending on the value of the trimHTML property, the javascript trim() method is applied to the HTML string.
new Cample("#page",{
trimHTML:false
})
This will avoid the errors associated with rendering a single Element in the component, but also the HTML may not be displayed correctly.
Methods
The Cample object has one function render.
render
The render function renders components such as Component, Each, etc. The function's arguments are template and options. Template is HTML markup with string interpolation, and options is an object of components processed by the render function. An example of arguments in a function:
(`<div>
{ {component} }
</div>`,{
component:newComponent
})
In this example, for the variable newComponent (let's say that stores the component Component), in the options object, the name component is given, which can be processed using interpolation in the template.
Example code
const newCample = new Cample("#page",{
trimHTML:false,
});
const newComponent
= component("new-component", "HTML");
newCample.render("{ {newComponent} }", {newComponent});
Cample table
Arguments | ||
---|---|---|
Name | Usage | Type |
selector | HTML selector, where components are rendered. | SelectorType |
options | Object options. | CampleOptionsType |
Methods: | ||
Name | Usage | Returns |
render | Renders components such as a Component, for example. | void |