Webcomponent_base JS module

This module requires the SocketIO library to be loaded <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>

class Item

async newItem(properties)

Create the new item on the backend. Use POST endpoint. (Extends constructor method which doesn’t support parameters, use it directly after document.createElement call)

Parameters

properties (string) – The properties dict to create the new item.

Returns

The webcomponent item with its database index set.

set()

Update this item on the backend. Use POST endpoint to send the instance properties values.

delete_()

Delete this item on the backend and frontend. Use DELETE on ‘endpoint/<index>’ resource.

---

Example usage:

example-item is your component name. “Custom element names require a dash to be used in them; they can’t be single words.” (mozilla.org)

<example-item index=2></example-item>

class ItemForm

change_event()

Call it after form validation to update the element. It set properties from input field with the corresponding id. For example an input with id ‘email’ will set the email property.

add_event()

Call it after form validation to create a new orphan Item. Construct and post the element to the Backend with Item.newItem(). Fire an item-created event with the newly created item: document.getElementById(‘item-form’).addEventListener(‘item-created’, (e) => e.detail);

---

Example usage:

<form-example-item></form-example-item>

class ItemList

items[]

A dynamic list of your component

---

Example usage:

<ul-example-item></ul-example-item>