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.
<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>```
Thank you for making it visible ,do you have any idea about this behavior?
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>
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>