DUICE (Data-binding UI Component Element)



---

🗒️ Conception

$3

Automatically synchronizes data and UI by binding JavaScript Object and Array to HTML DOM elements.


Changes to data are immediately reflected in the UI, and user input in the UI automatically updates the underlying data.


This bidirectional binding is powered internally by JavaScript Proxy and the Observer pattern.

$3

If you know basic HTML and JavaScript, you’re ready to go.


No need to learn complex syntax or frameworks — just write standard HTML and bind data intuitively.

$3

This library is built with pure vanilla JavaScript — no dependencies, no conflicts.


It’s lightweight, framework-agnostic, and can be seamlessly used alongside any other JavaScript libraries or frameworks.

---

🖥️ Demo site

$3

$3

$3

---

🔗 References

$3

$3

$3

---

🏁 Getting Started

$3

`javascript
const user = new duice.ObjectProxy({
id: 'apple',
name: 'Apple'
});
`

$3

`html


`

$3

| attribute | description |
|:-------------------------------------------|:--------------------------------------------------------------------|
| data-duice-bind="[object]" | Object name to bind |
| data-duice-property="[property of object]" | Object Property name to bind |
| data-duice-format="[data format clause]" | ex) string('###-###'), number(2), date('yyyy-MM-dd') |
| data-duice-if="[reutrn false to hiddne]" | javascript code for decide to hidden or not |
| data-duice-execute="[code to execute]" | javascript code to execute when element is updated |

$3

`javascript
// Fires before property is changing.
duice.ObjectProxy.onPropertyChanging(user, event => {
console.log(event);
});
// Fires after property is changed.
duice.ObjectProxy.onPropertyChanged(user, event => {
console.log(event);
});
`

---

📁 Array Element

![](https://duice.chomookun.org/test/array-element-test.html)


Data binding example between Array Proxy - HTML Element.

$3

`javascript
const users = new duice.ArrayProxy([
{id: 'apple', name: 'Apple'},
{id: 'monkey', name: 'Monkey'},
{id: 'orange', name: 'Orange'}
]);
`

$3

`html


`javascript
// Fires before property is changing.
duice.ObjectProxy.onPropertyChanging(users, event => {
console.log(event);
});
// Fires after property is changed.
duice.ObjectProxy.onPropertyChanged(users, event => {
console.log(event);
});
// Fires before item is selecting.
duice.ArrayProxy.onItemSelecting(users, event => {
console.log(event);
});
// Fires after item is selected.
duice.ArrayProxy.onItemSelected(users, event => {
console.log(event);
});
// Fires before item is moving.
duice.ArrayProxy.onItemMoving(users, event => {
console.log(event);
});
// Fires after item is moved.
duice.ArrayProxy.onItemMoved(users, event => {
console.log(event);
});
`


---

📁 Dialog(alert,confirm,prompt,custom dialog)

![](https://duice.chomookun.org/test/dialog/dialog-test.html)


Custom alert, confirm, prompt dialog example.

$3

// custom dialog from HTML Dialog Element
async function openDialog() {
duice.openDialog(document.getElementById('myDialog')).then(()=>{
alert('do next');
});
}
`

$3

`html


        Custom Dialog