Triggers "BringToview/Scroll To" not works correctly with dynamic name target

Bug Reports
1

fuse 1.8.1 - Mac Os Sierra

Hello! I have a ScrollView which I populate with Each. I need that from every item I can scroll to the next item through a special button

I tried to use bringToview but it seems that it does not work correctly when the item name target is dynamically generated. Instead if it is static it works correctly. It seems to be a bug. do you have any alternatives to suggest? I also tried with scrollTo and Y (targetNode) but it did not work anyway.

VIDEO ISSUE:

Here the complete reproduction:

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var nodeFocus = Observable();
		var items = Observable();

		var data =[{
					id:"item1",
					next:"item2"
				},
				{
					id:"item2",
					next:"item3"
				},
				{
					id:"item3",
					next:"item4"
				}
				,
				{
					id:"item4",
					next:"item5"
				}
				,
				{
					id:"item5",
					next:"item6"
		}];
		items.replaceAll(data);

		function OnNext(args){
			nodeFocus.value=args.data.next;
			setTimeout(function () {
        		nodeFocus.value = null;
   		 	}, 500);
		}

		function OnLastItem(args){
			nodeFocus.value="LastItem";
			setTimeout(function () {
        		nodeFocus.value = null;
   		 	}, 500);
		}

		module.exports={
			items:items,
			OnNext:OnNext,
			OnLastItem:OnLastItem,
			nodeFocus:nodeFocus
		}
	</JavaScript>

	<ScrollView Margin="10" ux:Name="scroller">
		<StackPanel ItemSpacing="500">
		<Each Items="{items}">
			<DockPanel ux:Name="{id}">
				<Text>{id}</Text>
				<Button Dock="Right" Text="Next Item" Clicked="{OnNext}"/>
				<Text Dock="Right"> | </Text>
				<Button Dock="Right" Text="Last Item" Clicked="{OnLastItem}"/>
			</DockPanel>
		</Each>
		<DockPanel ux:Name="LastItem">
				<Text>LAST ITEM</Text>
			</DockPanel>
		</StackPanel>
		<WhileString Value="{nodeFocus}" Test="IsNotEmpty">
		      <BringIntoView TargetNode="{nodeFocus}"/>
                    <!-- alternative to BringIntoView but it not works same 
                    <ScrollTo Target="scroller" Position="0,{=y({nodeFocus})}" /> 
-->
		</WhileString>
	</ScrollView>
</App>
2

I’m noticing that the fuse team is getting less active and every time I open a bug or make a request for help I do not get an answer. What is going on? Fuse is closing? I hope not…

3

Hey.

In your Each change this line:
<DockPanel ux:Name="{id}"> to <DockPanel Name="{id}">.
This should work. I think elements created inside Each with ux:Name doesn’t create Name parameter automatically as it should.

Hope this helps.

4

Thank you! It’s works!
What is the different between ux:Name and Name?

5

Hey.

From docs about ux:Name we can see this line:

Note that ux:Name can not be data-bound as it is a compile-time attribute. Data-binding happens at run-time.

And docs about Name attribute says:

Run-time name of the node.

Hope this helps.

1 Like