Update UX with Observable list change

How-to Discussions
1

Hello!

I have a small problem with an update feature on Observable list. When I update a value on my Observable list that no change the UX, but I can see in the logs that value was changed in the Observable list, but not in UX. What I’m doing wrong? Thank you!

<JavaScript>
var people = Observable(
     {"id":"AxFde"
     "name":"John",
     "mark":true},
     {"id":"MjQdF"
     "name":"Mary",
     "mark":true},
     {"id":"KoIyA"
     "name":"Gina",
     "mark":true}
);

function togglePeopleItem(args) {
   args.data.mark = !args.data.mark;
   people.forEach(function(c) {
      if(c.id == args.data.id) {
         c.marks = args.data.mark;
      }
   });
   console.log(JSON.stringify(people));
}


module.exports = {
     people : people;
     togglePeopleItem: togglePeopleItem
}

</JavaScript>

<Panel ux:Class="peopleItem">
	<Panel Background="#fff" ux:Name="contents">
		<DockPanel Margin="7,3,7,3">
			<StackPanel Margin="65,3,35,3">
				<Text Value="{name}" FontSize="16" />
				<Clicked>
					<Scale Factor="0.8" Duration="0.2" />
				</Clicked>
			</StackPanel>
			<StackPanel Width="35" Alignment="CenterRight">
				<Button Clicked="{togglePeopleItem}">
				<Star Width="25" Height="25" Ratio="0.4">
					<Stroke Width="1">
					<SolidColor ux:Name="checkedStarColor" Color="#ddd"/>
					</Stroke>
				</Star>
				</Button>
			</StackPanel>
			<WhileTrue Value="{mark}">
				<Change checkedStarColor.Color="#50ac9a" Duration="0.3"/>
			</WhileTrue>
		</DockPanel>
	</Panel>
</Panel>

<Page Background="#eee">
   <ScrollView>
      <StackPanel>
         <Each Items="{people}">
            <peopleItem />
         </Each>
      </StackPanel>
   </ScrollView>
</Page>
2

If you want to trigger the UI, You have to make the object attributes to be Observable too,

    <JavaScript>
		var Observable = require("FuseJS/Observable");
		var people = Observable(
		     {
		     	id:"AxFde",
		     	name:"John",
		     	mark:Observable(true)
		     },
		     {
		     	id:"MjQdF",
		     	name:"Mary",
		     	mark:Observable(true)
		     },
		     {
		     	id:"KoIyA",
		     	name:"Gina",
		     	mark:Observable(true)
		     }
		);

		function togglePeopleItem(args) {
		   people.forEach(function(c) {
		      if(c.id == args.data.id) {
		         c.mark.value = !c.mark.value;
		      }
		   });
		   console.log(JSON.stringify(people));
		}


		module.exports = {
		     people: people,
		     togglePeopleItem: togglePeopleItem
		};

	</JavaScript>

	<Panel ux:Class="peopleItem">
		<Panel Background="#fff" ux:Name="contents">
			<DockPanel Margin="7,3,7,3">
				<StackPanel Margin="65,3,35,3">
					<Text Value="{name}" FontSize="16" />
					<Clicked>
						<Scale Factor="0.8" Duration="0.2" />
					</Clicked>
				</StackPanel>
				<StackPanel Width="35" Alignment="CenterRight">
					<Button Clicked="{togglePeopleItem}">
						<Star Width="25" Height="25" Ratio="0.4">
							<Stroke Width="1">
							<SolidColor ux:Name="checkedStarColor" Color="#ddd"/>
							</Stroke>
						</Star>
					</Button>
				</StackPanel>
				<WhileTrue Value="{mark}">
					<Change checkedStarColor.Color="#50ac9a" Duration="0.3"/>
				</WhileTrue>
			</DockPanel>
		</Panel>
	</Panel>

	<Page Background="#eee">
	   <ScrollView>
	      <StackPanel>
	         <Each Items="{people}">
	            <peopleItem />
	         </Each>
	      </StackPanel>
	   </ScrollView>
	</Page>
3

Hello Ichan_mb! Thank you! Now its working!

I optimize a little bit my code and I did this: (just for future reference if someone had the same problem)

	function togglePeopleItem(args) {
		var index = people.indexOf(args.data);
		people.getAt(index).mark.value = !people.getAt(index).mark.value;
	}

One more question, if i have many items, like 600, 800,… do you think create so many Observables marks that could make my app get a bad performance?

Rui

4

For large lists, consider using paging mechanism together with ScrollViewPager, here is the reference : https://fuseopen.com/docs/fuse/controls/scrollviewpager.html