Preface
For various reasons, I desired to have the change-efficiency of a virtual DOM without the ReactJS management. There is a standalone virtual DOM implementation, but it leaves the management up to you. I found that Ractive could be used as a minimal manager for a DOM section.
Abstract
Use a lodash template as the generator for a DOM section, to be applied through Ractive’s virtual DOM diff operations
Details
|
|
notes:
- We provide a
options.el$
as a selector, to select an element present within the actual DOM, such as#virtualDomHere
Template['component/pass.mu']
represents a minimal mustache template serving as a passthru for thegenerater
function- The
generater
function could be a lodash template
pass.mu
campaign/ticket.html
Notes
The data would then necessarily be managed through the ractive instance.
Extra
Preface
If data sets are held in the front end, I prefer to hold them in a front end database. ForerunnerDb is excellent for this. So, let’s explore using this virtual DOM in such a way that reacts to changes within a collection
Abstract
Use a ForerunnerDb collection as the data store that ractive reacts to
Details
|
|
notes:
- the
data_getter
represents, perhaps, a way of ordering or filtering the data from a collection that is to be shown - the
collection
is the ForerunnerDb collection (example presented below)
collection