Binding to a dropdown template

Technical Questions
1

Hi,

I seem to be having an issue with data binding to dropdown templates.

I’ve supplied a sample variable to the page javascript

state.testItems = [
    {
        name: "Test 1",
        items: [
            { name: "Subtest 1", items: [] },
            { name: "Subtest 2", items: [] },
        ],
    },
    {
        name: "Test 2",
        items: [
            { name: "Subtest 3", items: [] },
            { name: "Subtest 4", items: [] },
        ]
    }
];

And I’ve gone ahead and thrown in the dropdown template, giving it a repeat for each of the testItems

image
image773×233 13 KB

Meanwhile the Text component (Dropdown… above) is bound to state.testItemsItem.name.

The text does not seem to bind; rather, it shows up as “undefined.” But it does repeat twice, once for each item in the array.

I’m wondering if we’re going about this wrong and need to be binding some other way?
When I replicate the structure without the template, the bindings seem to be valid and not undefined.

Is there a separate way to create a dropdown without having to use the template, if templates are the issue?

Thanks.

2

Hey @tsedlar, thanks for reaching out! The first thing I notice is a typo with your data binding: it needs to be state.testItemsItem.name but was state.testItemsItems.name

Also, it needs to inheritState to pass data from the top. We made that update for you in the JSON, but we will be releasing a PR to make that option available in the UI as well.

Let me know if you have any questions!