client-side.js

/**
 * @file Description
 */

NYX(function(){
    $("[data-dynamic-data]").each(function(){
        var elem  = $(this);
        var name  = elem.attr("data-dynamic-data");
        var id    = elem.attr("data-id");
        var event = "dynamic-data " + name + " " + id;

        NYX.clovers.subscribe(event)(function(type, changed){
            var elem = $("[data-dynamic-data=" + name + "][data-id=" + id + "]");

            if (type === "save") {
                changed.each(function(val, key){
                    elem.find("[data-key=" + key + "]").text(val);
                });
            } else if (type === "destroy") {
                elem.remove();
            }
        });
    });
});

module.js

module.exports = function(mod, io, log, models, helpers, nyx, util){
    mod.clovers.dynamicData("host", "address");
};

server-side.js

/**
 * Description
 *
 * @param {String} table
 * @param {Array} [fields]
 */

exports.dynamicData = function(table, fields){
    fields = (fields || []).arrayify.concat(["name", "title", "description"]);
    var prefix = "dynamic-data " + table + " ";

    this.clovers.on(table + " save", function(row, changed){
        var newData = {};
        changed.each(function(val, key){
            if (fields.contains(key)) newData[key] = val;
        });

        var event = prefix + row.id;
        nyx.io.sockets.in(event).emit(event, "save", newData);
    });

    this.clovers.on(table + " destroy", function(row){
        var event = prefix + row.id;
        nyx.io.sockets.in(event).emit(event, "destroy");
    });
};

template.html

<table>
    <thead>
        <tr>
            <th><%= lang("name") %></th>
            <th><%= lang("description") %></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <% groups.each(function(group){ %>
            <tr data-dynamic-data="group" data-id="<%= group.id %>">
                <td data-key="name"><%- link(group, group.name) %></td>
                <td data-key="description"><%= group.description %></td>
                <td>
                    <%- form("groups#destroy", { params: group, class: "right", data: { confirm: true, ajax: true, action: "disable" } }, submit(lang("delete"), { class: "red" })) %>
                </td>
            </tr>
        <% }) %>
    </tbody>
</table>