JSFiddle - React, Tailwind, and code Playground

by psycketom

HTML

<div id="model" data-bind-title="Name">
    <dl>
        <dt>Address</dt>
        <dd data-bind="Address">0.0.0.0</dd>
        
        <dt>Full name</dt>
        <dd data-bind="TextRecords.mx-full_name">MX-&lt;MODEL&gt;</dd>
        
        <dt>FS Version</dt>
        <dd data-bind="TextRecords.mx-fs_vers">FSVERS</dd>
        
        <dt>Form Name</dt>
        <dd data-bind="_formName">Camera[$id]</dd>
    </dl>
</div>

JavaScript

var getObjectIndex = function(object, index)
{
    return object[index];
};

var getModelValue = function(modelObject, keyPath)
{
    return keyPath.split('.').reduce(getObjectIndex, modelObject);
};

var bindModel = function(element, model)
{
    // Get all attributes.
    var result = document.evaluate('descendant-or-self::*/attribute::*[starts-with(name(), "data-bind")]', element, null, XPathResult.ANY_TYPE);
    
    // Resulting element cache.
    var attributes = [];
    
    // Node cache.
    var node;
    
    // Transform XPathResult to Array.
    while (node = result.iterateNext())
    {
        attributes.push(node);
    }
    
    for (var i = 0; i < attributes.length; i++)
    {
        var attribute = attributes[i];
        var element = attribute.ownerElement;
        
        // Normalize value.
        var value = attribute.value;
        value = getModelValue(model, value);
        
        if (typeof(value) !== 'undefined')
        {
            // Determine if this is a value binder attribute.
            var valueBinder = attribute.name === 'data-bind';
            
            if (valueBinder)
            {
                element.innerHTML = value;
            }
            else
            {
                // Extract actual attribute name.
                var attribute = attribute.name.replace('data-bind-', '');
                
                // Set attribute value to the data provided one.
                element.setAttribute(attribute, value);
            }
        }
        else
        {
            console.warn('Could not find model property with name: "' + attribute.value + '".');
        }
        
        // Cleanup.
        element.removeAttribute(attribute.name);
    }
}

bindModel(document.getElementById('model'), {
    Address : '192.168.1.19',
    TextRecords :
    {
        'mx-full_name' : 'S15D-Sec',
        'mx-fs_vers' : 'MX-V4.2.1.43'
    },
    Name : 'mx10-14-218-45',
    _formName : 'Camera[0]'
});