Dynamic component children population


#1

what would be a good way to create a component with ‘component children’ node which would be used as a ‘template’ for variable components (let’s say they differ in image or shape or text). Imm thinking of 10’s or 100’s of items which might have slight variations and how to approach such a problem in Noodl.

Thanks!


#2

Sounds like Collections, Models and a For Each node is a perfect fit here.
So you would have a Collections filled with Models that have the different image sources, texts etc. Connect that to a For Each node that points to a Noodl Component to use as a template, and then extract the instance specific data inside the template with a Model node.
If the items need to vary a lot, you can set the For Each node to be dynamic so you can pick different templates for different Models. Or you can include something like “showImage” in the Model and connect that to the visibility of the image node in the template.


#3

Thanks for a good explanation @micart. I was wondering how you’d
“set the For Each node to be dynamic” ?


#4

The For Each node has a property named “Template Type”. Set that to Dynamic.
A new property called “Scripts” pops up where you can write javascript to decide which component to create.

E.g.

switch(item.get('type')) {
   case 'details': component = '/Items/DetailsCard'; break;
   case 'photo': component = '/Items/PhotoCard'; break;
   default: component = '/Items/DefaultCard'; break;
}

#5

I’ll give this a go! Thanks.

What would be the ‘correct’ way to load a csv with ‘data’ into a collection on start? It seems that this only gets added to the collection only when I open-close the JS node. Otherwise I’ve tried a switch with ON state to send a ‘ping’ to load the data with the same issue. Result returning 0.

var response = inputs.componentsCSV;
var items = response.items;

var collection = Noodl.Collection.get('componentCollection');

for(var i=0; i<items.length; i++) {
    collection.add(Noodl.Model.create(items[i]));
}

#6

interesting enough if I do static data (CSV) to collection (sync) without the JS node it doesn’t work, unless I set the collection to be ‘Local’, What would the reasons for that be?