DUICE (Data-binding UI Component Element)

Conception

1. MVC Auto-Binding (between Data Structure and HTML DOM Element)

By using the Object and Array, bidirectional binding processing is performed with HTML DOM Element in charge of presentation of the screen. (It's implemented by Internally it is Proxy and Observer Pattern) When changing the data of Object and Array, the value of the UI DOM element binding was also automatically changed. Conversely, if the user changes the value of the UI DOM Element, the binding Object and Array is automatically changed.

2. Reducing Learning Curve (Only simple HTML and javascript)

If you know only basic HTML format and Javascript, configure it to be able to operate.

3. Pure Javascript Prototype (No Dependency, No Conflict)

This library is developted by just pure javascript. It is oriented towards minimal code, no-dependency and no-conflict. Therefore you can use it with another javascript library together.

Git and Website

• Git Repository: https://github.com/oopscraft/duice
• Website: https://duice.oopscraft.org

Demo Site

• Arch4j: https://arch4j-web.oopscraft.org/admin
• Test Account: developer/developer

References

• Plugins: https://duice-plugin.oopscraft.org

Object Element

Javascript

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

HTML

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

<span data-duice-bind="user" data-duice-property="id"></span>
<input type="text" data-duice-bind="user" data-duice-property="name"/>

Test Case

Object Element Test

Array Element

Javascript

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

HTML

| attribute | description | |:-----------------------------------------------|:-----------------------------------------| | data-duice-bind="[array]" | Object name to bind | | data-duice-loop="[element name],[status name]" | element object and status variable name | | data-duice-script="[script code]" | javascript code to execute when element is updated |

<table>
    <tr>
        <th>no</th>
        <th>name</th>
        <th>name</th>
    </tr>
    <tr data-duice-bind="users" data-duice-loop="user,status">
        <td data-duice-bind="status" data-duice-property="count"></td>
        <td data-duice-bind="user" data-duice-property="id"></td>
        <td><input type="text" data-duice-bind="user" data-duice-property="name"/></td>
    </tr>
</table>

Test Case

Array Element Test

Dialog(alert,confirm,prompt,custom dialog)

Javascript

// await style
async function confirmAwait() {
    if(await duice.confirm('<b>Hello~</b>\nThis is confirm message!\nYes or No?')){
        alert(true);
    }else{
        alert(false);
    }
}

// then style
async function confirmThen() {
    duice.confirm('<b>Hello~</b>\nThis is confirm message!\nYes or No?').then((result) =>{
        if(result) {
            alert(true);
        }else{
            alert(false);
        }
    });
}

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

HTML

<dialog id="myDialog">
    <pre>
        Custom Dialog
    </pre>
</dialog>

Test Case

Dialog/Alert/Confirm/Prompt Test

License

LICENSE

Contact

• email: chomookun@gmailcom
• linkedin: https://www.linkedin.com/in/chomookun