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

Articles