Library to perform data joins with any type of JavaScript objects. Useful in digest cycles where it's important to minimize changes to a view for performance reasons, such as DOM manipulation. The module binds data points to objects via hidden attributes, and performs diffing comparisons across multiple iterations to ensure objects are not created or removed unnecessarily, thus keeping view changes to a minimum.

import dataJoint from 'data-joint';

or using a script tag

<script src="//unpkg.com/data-joint"></script>

then

const myData = [{ id: 0, val: 2 }, { id: 1, val: 4 }, { id: 2, val: 7 }];
const myView = new Set();

dataJoint(myData, [...myView], 
    obj => myView.add(obj), // append obj
    obj => myView.delete(obj), // remove obj
    {
        createObj: () => ({}),
        updateObj: (obj, d) => { obj.double = d.val * 2 },
        exitObj: obj => { obj.double = 0 },
        idAccessor: d => d.id
    }
);

dataJoint(data, existingObjs, appendObjFn, removeObjFn, [{options}]);

data: An array of data points. Each point should be an object that supports attribute binding.

existingObjs: An array of view objects to join the data with.

appendObjFn: The method to add a new object to the view. The object is passed as single argument: obj => { ... }.

removeObjFn: The method to remove an existing object from the view. The object is passed as single argument: obj => { ... }.

An optional configuration object supporting the additional arguments: