Learn how to convert your html into a dynamic realtime application.
Collaborative Elements
Simply define a array, object and key. If the array contains the object and the object contains the key. Viola! The value is fetched in the input. Like wise, typing in the input will save the value. If the array did not exist previously it will be created. If the object is left empty, typing in the input will create a new object.
<input array="contacts" object="" key="name">The attributes array, object and key are at the center of the CoCreate universe, we take a data first aproach. By defining these 3 attributes you can save and fetch data from any input, textarea, select and thier various types. All other elements like h1, h2, span, etc will only fetch if the contenteditable attribute is applied.
<h1 array="contacts" object="" key="name" contenteditable></h1>CoCreateJS by default is collaborative. To turn collaboration off for an element, apply attribute realtime="false"
Input
Textarea
Contenteditable
Add attribute contenteditbale to any html and element and use it as an input. CoCreateJS also converts contenteditable elements to collaborative rich text editors or a website builder.
<h1 type="text" array="contacts" object="" key="name"></h1>Radio
Checkbox
Select
Form
The form tag is used for grouping elements and applying attributes dynamically to it's childeren. Attributtes added to a form tag will only be applied to the child elements if the child elements attribute does not currently contain a value.
Actions
The actions attribute is used to trigger one or more actions in the order they were applied. Actions are chainable and require success of the first to trigger the next. Many of the CoCreate's components have actions, you will find the actions defined in the respective components documentation. Here we will be introduing the basics as it relates to form and saving.
<button actions="save"> </button>Applying and clicking this action will save the value of the elements in a form to their respective array, object and key. If a element does not have a object defined a object will be generated and applied to all other elements with the same array defined and do not have a object. Existing object are never overwriten.
CRUD Attributes
-
array string required
Defines a array name where your documents will be stored. sql equivalent is a table.
-
object string required
Defines the object by id where your data will be stored. if left empty one will be generated. sql equvalient is a row
-
key string required
Defines the key in the object containing the value. sql equvalient is a column
-
contenteditable boolean optional
htmltags can be editable and display will collaborators cursors.
-
realtime boolean optional
Save data onChange, if false a btn required to save. If attribute is empty or not used Default's to true.
-
read boolean optional
Fetch value on page load or when updated. If attribute is empty or not used Default's to true.
-
save boolean optional
Save data onChange/submitBtn. If attribute is empty or not used Default's to true.
-
update boolean optional
If false the element will not listen to updates from others. Using a btn will also not save. If attribute is empty or not used Default's to true.
-
listen boolean optional
If false the element will not listen to updates from others. Using a btn will also not save. If attribute is empty or not used Default's to true.
-
crud boolean optional
If false the data you insert onChange will not store in DB. The data will only be retained by CRDT. If attribute is empty or not used Default's to true.
-
crdt boolean optional
If false all data will be stored directly in db and CRDT will track changes. If attribute is empty or not used Default's to true.
-
cursors boolean optional
Show collaborators cursor positions. If attribute is empty or not used Default's to true.
-
broadcast string optional
Broadcast messages and changes to other collaborators in the same namespace and room. If attribute is empty or not used default's to true.
-
broadcast-sender string optional
Broadcast messages and changes to self. If attribute is empty or not used default's to true.
-
broadcast-browser string optional
Broadcast messages and changes locally to all open windows, tabs and iframes in current browser. If attribute is empty or not used default's to true.
-
namespace string optional
Define a unique namespace where messages and changes are sent and received
-
room string optional
Define a unique room where messages and changes are sent and received
-
value-prefix string optional
Adds a prefix to value before saving
-
value-suffix string optional
Adds a suffix to value before saving
Previous Topic