3 ms·
author here - getting iteration and nesting to work was the hardest part, and I don't think the basic example on the homepage illustrates this too well. the wa
by daliwali 11y ago
author here - getting iteration and nesting to work was the hardest part, and I don't think the basic example on the homepage illustrates this too well.
the way it works is that every value gets cast into an array for rendering purposes if it isn't already. so in case of an array of objects, you don't need to explicitly define that you expect an array, it'll just render `n` objects with nested bindings.
to give an example, on the homepage there's an array that is rendered, `["Tall", "Grande", "Venti"]`. if a new array is set, for example, `["Tall", "Grande"]` (without "Venti"), it will re-render based on if the values at the indices changed, so in this case it would just remove the dom node for "Venti".
another cool thing is that with the mount function, you can either return nothing so that the node that was specified will be appended, or return a completely different node based on the value, which enables heterogeneous elements in a list. the mount function also gives you an opportunity to mutate a node in other ways than just setting the text/value/checked/whatever, such as setting a classname i.e. `node.className = "fa fa-hourglass"`. then there's the unmount function but 99% of the time won't be needed because dom nodes that aren't in the live tree and don't have a reference will just get GC'd.
it should be entirely possible to build a web app with Simulacra.js using a single bound object, a single template, and describing all possible bindings in one go. it's up to the developer to add whatever convoluted architectures are hip at the moment (stores, reducers, actions, what have you).