How to use Behavior

Members

(constant) Using event callbacks to get the current component instance

In the event callback (onCreated,onMounted,onClick,onPointDown,onPointRelease), you can get the current component instance by using "this".

Example
# modify component's text property
    console.log(this)
    this.text = "hello world"

(constant) Using onMounted to change layoutinfobox content to create a table

User can change a component's appearance in its event callbacks. For direct DOM manipulation, it is recommended to do so within the onMounted hook.

Example
# LayoutInfoBox's onMounted : modify the content
    this.container.querySelector('.layout-infobox-content').innerHTML = "hello world"


# LayoutInfoBox's onMounted : use TComponents
    const btn = new TComponents.Button(this.container.querySelector('.layout-infobox-content'))
    btn.render()

# LayoutInfoBox's onMounted : append a table

    var table = document.createElement('table');
    table.border = 1;
    table.style.cssText = `
      text-align:center;
      border-collapse: collapse;
    `

    var headerRow = document.createElement('tr');
    var header1 = document.createElement('th');
    header1.textContent = 'Name';
    var header2 = document.createElement('th');
    header2.textContent = 'Age';
     var header3 = document.createElement('th');
    header3.textContent = 'Country';
    headerRow.appendChild(header1);
    headerRow.appendChild(header2);
    headerRow.appendChild(header3);
    table.appendChild(headerRow);

  
    var dataRow1 = document.createElement('tr');
    var data1_cell1 = document.createElement('td');
    data1_cell1.textContent = 'John Doe';
    var data1_cell2 = document.createElement('td');
    data1_cell2.textContent = '25';
    var data1_cell3 = document.createElement('td');
    data1_cell3.textContent = 'USA';
    dataRow1.appendChild(data1_cell1);
    dataRow1.appendChild(data1_cell2);
    dataRow1.appendChild(data1_cell3);
    table.appendChild(dataRow1);

    this.container.querySelector('.layout-infobox-content').innerHTML = '';
    this.container.querySelector('.layout-infobox-content').appendChild(table);