This module provides a set of utilities to bind plain HTML Input / Form Elements to a Convergence model. The module provides simple two way data binding between the HTML input element and a particular field in the Convergence data model. The module currently supports the following input elements:
- Text Input Fields
- <input type="text" />
- <input type="password" />
- <input type="email" />
- <input type="url" />
- <input type="search" />
- <textarea />
- Radio Buttons
- <input type="radio" />
- Select Elements
- <select />
- <select multiple />
- Color Selector
- <input type="color" />
- Number Fields
- <input type="number" />
- <input type="range" />
You can see it in action here.
npm install @convergence/input-element-bindings
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/rxjs.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@convergence/convergence/convergence.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@convergence/string-change-detector/browser/string-change-detector.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@convergence/[email protected]/dist/umd/convergence-input-element-bindings.min.js"></script>
</head>
<body>
<input type="text" id="textInput" disabled="disabled"/>
<script>
const DOMAIN_URL = "http://localhost:8000/realtime/domain/convergence/default";
Convergence.connectAnonymously(DOMAIN_URL)
.then((domain) => {
return domain.models().openAutoCreate({
collection: "input-binder",
id: "example",
data: () => {
return {textInput: "Text to collaborate on"};
}
});
})
.then((model) => {
const textInput = document.getElementById("textInput");
textInput.disabled = false;
const realTimeString = model.elementAt("textInput");
ConvergenceInputElementBinder.bindTextInput(textInput, realTimeString);
})
.catch((error) => {
console.error(error);
});
</script>
</body>
</html>You can find a working example in the example directory.
function bindTextInput(textInput, stringElement)
function bindNumberInput(numberInput, numberElement)
function bindCheckboxInput(checkboxInput, booleanElement)
function bindRangeInput(rangeInput, numberElement)
function bindColorInput(colorInput, stringElement)
function bindSingleSelect(selectInput, stringElement)
function bindMultiSelect(selectInput, arrayElement)
function bindRadioInputs(radioInputs, stringElement)