I need a 2-state toggle Button: at each tap, that changes its background color and its text label (color and text). Its implementation is simple and it works correctly when the button belongs to a simple page.
Instead, when the button is put in each element of a simple list (20 elements) it does not change its background color, and only its label text changes, not its color.
Here some code details to check the problem:
<StackLayout orientation="vertical" >
<ListView items="{{ items }}" itemTap="onItemTap">
<ListView.itemTemplate>
<StackLayout orientation="vertical" class="follow-button">
<Button text="Undefined" tap="onTap"/>
</StackLayout>
</ListView.itemTemplate>
</ListView>
</StackLayout>
and in js side (‘value’ is used only to demonstration):
var value = 1;
exports.onTap = function (args) {
view = args.object;
value = value === 1 ? 0 : 1;
view.text = value === 1 ? "button on" : "button off";
view.backgroundColor = value === 1 ? "red" : "white";
view.color = value === 1 ? "white" : "red";
}
Behaviour on a page (correct):
Tap 1
Tap2
Behaviour on a list (wrong):
Tap 1
Tap 2
I see that removing or fixing the button text, then button background changes correctly at each tap.
Any suggestion?