While true and each

How-to Discussions
1

Hi, i want to change the color of one specific item inside the each method , how can i achieve that?

          <Each Items="{CardAll}">
            <DockPanel Margin="0,5,0,0">
              <Circle Height="25" Width="25" Dock="Left" Margin="4,0,0,0">
                <Stroke Width="2" ux:Name="StrokeCB" Brush="Gray"/>
                <Circle Height="20" ux:Name="CercleCB" Width="20" Color="color0" Opacity="0" Visibility="Collapsed"/>
              </Circle>
              <Text Value="{last4}" Dock="Left" ux:Name="TextCB" Margin="10,0,0,0" FontSize="18" Font="Ubuntu" TextColor="color4" Alignment="Center" TextAlignment="Center"/>
            </DockPanel>
            <WhileTrue Value="true">
              <Change StrokeCB.Brush="Yellow" Duration="0.4" Easing="CubicIn"/>
              <Change CercleCB.Brush="Yellow" Duration="0.4" Easing="CubicIn"/>
              <Change TextCB.TextColor="Yellow" Duration="0.4" Easing="CubicIn"/>
            </WhileTrue>
          </Each>
2

Hi!

Databind your <WhileTrue Value="{someCondition}">.

Then in JS:

module.exports = {
    CardAll : CardAll.map(function(x) {
         return {
            last4: x.last4,
            someCondition: /* ... here goes a boolean expression of whether to change the color ....*/
         }
    })

}

3

Many thanks, how can i change the value of someCondition while clicked to one?

4

Make it Observable inside map():

 var someCondition = Observable(false);

 return {
     someCondition: someCondition,
     clicked: function() {
        someCondition.value = !someCondition.value;
     }
 }
5

Thanks again , sorry for asking too much questions but i want to know about all the possibilities. what if i want to make only one value at time to be available. if i choose the first , all except the one choosed become false. state group here is giving the same results than while true

6

Then keep an Observable of the currently selected item

var selected = Observable(foo);

And then in your map(function(x) {...

someCondition: Observable(function() { return x === selected.value; })