changing the ux of an item inside Each class

General
1

I have items inside an each class, Item contain a text and button (“More” to change text from “NoWrap” to “Wrap”), when i click on this button all the items are affected by this behavior and not only the selected one.

2 
<JavaScript>
var Observable = require('FuseJS/Observable');
var data =[
  	{ description:"bloublabloublabloublablouabloublablouabloublablouabloublablouabloublablouabloublabloublabloublabblbloublabloublabloublablouabloublablouabloub"},
    {  description:"bloublabloublabloublablouabloublablouabloublablouabloublablouabloublablouabloublabloublabloublabblbloublabloublabloublablouabloublablouabloub"},
    { description:"bloublabloublabloublablouabloublablouabloublablouabloublablouabloublablouabloublabloublabloublabblbloublabloublabloublablouabloublablouabloub"}
]

var descriptionWrap = Observable(false);

module.exports = {
	data:data,
	descriptionWrap: descriptionWrap,
	MoreDescription: function() {
	descriptionWrap.value = !descriptionWrap.value;
	}
};

</JavaScript>

<Panel Height="25%"  ux:Class="itemModel">
	<StackPanel ItemSpacing="10" Orientation="Horizontal">
		<Button Clicked="{MoreDescription}">
         	<Text ux:Name="buttonName" Value="More" FontSize="15"   Color="Green"/>
        </Button>
        <Text Value="{description}" ux:Name="descriptionText" TextWrapping="NoWrap"/>
         <WhileTrue Value="{descriptionWrap}">
         		<Change Duration="0.8"  Target="descriptionText.TextWrapping" Value="Wrap" />
                <Change Target="buttonName.Value" Value="Less" />
        </WhileTrue>
	</StackPanel>
</Panel>
<StackPanel ItemSpacing="10">
<Each Items="{data}">
<itemModel/>
</Each>
</StackPanel>```
3

I took the liberty of wrapping your code in triple backticks to make it readable. :slight_smile:

4

Thank you for making it visible :slight_smile: ,do you have any idea about this behavior?

5

Hi!

This is because your descriptionWrap is global to your entire app, not a part of each items state.
Instead you need to add this variable to each item in your data:

function MyData(val) {
	this.description = val;
	this.descriptionWrap = Observable(false);
	this.toggleDescriptionWrap = function(){
		this.descriptionWrap.value !this.descriptionWrap.value;
	}.bind(this);
}

var data =[
    new MyData("bloublabloublab"),
	new MyData("bloublabloublab"),
	new MyData("bloublabloublab")
];

<Button Clicked="{toggleDescriptionWrap}">
    <Text ux:Name="buttonName" Value="More" FontSize="15"   Color="Green"/>
</Button>
6

Hi Kristian,

Thank you so much your solution works perfectly and i find another way to do it without changing data model, i separate this code in a new UX file.

<Panel  ux:Class="itemModel">

	<JavaScript>
var Observable = require('FuseJS/Observable');

var descriptionWrap = Observable(false);

module.exports = {
    descriptionWrap: descriptionWrap,
    MoreDescription: function() {
    descriptionWrap.value = !descriptionWrap.value;
    }
};

</JavaScript>
    <StackPanel ItemSpacing="10" Orientation="Horizontal">
        <Button Clicked="{MoreDescription}">
             <Text ux:Name="buttonName" Value="More" FontSize="15"   Color="Green"/>
        </Button>
        <Text Value="{description}" ux:Name="descriptionText" TextWrapping="NoWrap"/>
         <WhileTrue Value="{descriptionWrap}">
                 <Change Duration="0.8"  Target="descriptionText.TextWrapping" Value="Wrap" />
                <Change Target="buttonName.Value" Value="Less" />
        </WhileTrue>
    </StackPanel>
</Panel>