Observable List declaration vs Each tag

How-to Discussions
1

Hi!

I’m trying to make it work the following observable list called listItems:

var steps = [
  { id: "0", caption: "title1",
    listItems: [
              { title: "value1", value: "value1" },
              { title: "value2", value: "value2" },
              { title: "value3", value: "value3" }
          ] },
  { id: "1", caption: "title2",
    listItems: [
              { title: "value1", value: "value1" },
              { title: "value2", value: "value2" },
              { title: "value3", value: "value3" }
          ] }
];

var actualQuestion = Observable(0);
var listItems = Observable(steps[actualQuestion.value].listItems);
var caption = Observable(steps[actualQuestion.value].caption);

questionList.onParameterChanged( function(param) {
    actualQuestion.value = param;
})

This is the corresponding template:

...
<BodyText Alignment="CenterLeft" Value="{caption}"/>
...
<Each Items="{listItems}">
    <ListItem Title="{title}" Value="{value}" />
</Each>
...

The caption observable works fine, but not the listItem observable. In this case it seems that the UI only sees an empty array. I don’t know where is the error if it in the observable declaration or in the template.

Would appreciate any help.

Thanks

2

It seems that putting an array as an argument in the Observable instantiation, makes it a scalar variable rather than Observable list.

I could make it work by using an external loop to take into account the scalar variable, and let inner loop ({}) iterates the elements. Now it works.

        <Each Items="{listItems}">
          <Each Items="{}">
          	<ListItem Title="{title}" Value="{value}" />
          </Each>
        </Each>