List data binding

[TimG]

@radikris You are correct, currently there is no way to bind a list object to a custom component, but rather having a list input that is made up of individually authored list items directly within Builder.

(Side Note: If you think this would be a good feature request, I recommend checking out our feature request and customer feedback platform, ideas.builder.io, where you can submit requests and vote on submissions of other users! Check it out! )

Now, for your specific use case, you mentioned that your lists are a data model within Builder. I think in this instance, the best way to achieve your goal would be to have 2 custom components, one the CustomGrid, and one the CustomGridElement

Your CustomGrid would have the various inputs (title, subtitle, etc) as well as a Dynamic Editing Region.

You would then be able to pull your[ list data model onto your page(Connecting dynamic data in Builder's Visual Editor), add the CustomGridElement in the dynamic editing region, and use the Repeat for Each UI you mentioned above to map over the list elements and display each element in your list.

I created a Fiddle showing the basic of how this would look (without using a CustomGridElement), which you can find here: Builder.io: Drag and drop page builder and CMS

If your CustomGridElement is purely visual, I might even recommend just creating a template within Builder, and not worrying about registering a custom component, as that would require less code and would be easier to edit on the fly within our Visual Editor.

My custom element code looks something like this:

export const CustomGrid: React.FC<CustomGrid> = (props) => {
  return (
    <>
        <p>{props.title}</p>
        <p>{props.subtitle}</p>
        
        <BuilderBlocks 
            blocks={[...props.builderBlock.children]} 
            parentElementId={props.builderBlock.id} 
            dataPath="this.children" />
    </>
  );
};

Builder.registerComponent(TextAndImage, {
  name: "CustomGrid",
  canHaveChildren: true,
  inputs: [
    {
      name: "title",
      type: "text",
      defaultValue: "A short title",
    },
    {
      name: "subtitle",
      type: "text",
      defaultValue: "A short subtitle",
    },
  ]
});

Do you think that would achieve the use case you have outlined? Let me know if you have further questions or follow ups, always happy to help!