Nativescript: элементы списка снова используются при прокрутке

Question

Я пытаюсь добавить товары в корзину, нажав STORE [<Label>]. Затем я меняю цвет метки для этого добавленного списка.

После этого я пытаюсь добавить больше продуктов, прокручивая.Автоматически, другой цвет метки списка ListView изменился.

Я знаю, что такое поведение произойдет в UITableView в iOS.С помощью NSDictionary я могу справиться с этим. Повторное использование таблицы в iOS

Я не знаю, как справиться с этим в NativeScript

Кодирование

.js

exports.cartColorChange = function(args) {
    var lbl = args.object;
    lbl.color = "rgb(171, 0, 230)";
};

.xml

<ListView col="0" row="2" items="{{ mySecondItems }}" id="myListVw" itemLoading="listViewItemsLoading" itemTap="secondListViewItemTap" class="list-group" separatorColor="transparent">
<ListView.itemTemplate>

<GridLayout class="listGrid" columns="75,*" rows="*" width="100%" height="90" >
  <Label col="0" row="0" class="roundCircle" text="{{ price }}" textWrap="true"  />

  <StackLayout col="1" row="0" orientation="vertical" verticalAlignment="center">
       <Label class="booksubtitle" text="{{ subtitle }}" textWrap="true" id="wow"  />
       <Label class="bookTitle" text="{{ title }}" textWrap="true"  />
       <Label class="addCart" text="&#xf291;" textWrap="true" tap="cartColorChange" />

  </StackLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>

.css

Label.addCart{

    text-align: right;
    color: rgb(220, 220, 220);
    margin-right: 15px;
    margin-bottom: 0px;
    font-size: 15px;
    font-family: "FontAwesome";
}

Выход:

Answer 1

вы напрямую изменяете цвет визуализируемого объекта, из-за которого при повторном использовании объекта сохраняется этот цвет.

вы можете добиться того же эффекта, изменяя свойство объекта при нажатии.и на основе этого свойства применяя стили.как className="{{isClicked?'clickedCart':'notClickedCart'}}" или stle.color="{{isClicked?'red':'blue'}}"

вот обновленная демоверсия игровой площадки: https://play.nativescript.org/?template=play-js&id=T6sna8&v=8

Кодировка

.js

exports.cartColorChange = function(args) {
    var lbl = args.object;
    var item=lbl.bindingContext;
    var index = secondArray.indexOf(item)
    console.log("Clicked item with index " + index);
    item.isClicked = !item.isClicked;
    secondArray.setItem(index,item);
    // lbl.color = "rgb(171, 0, 230)";
};

.xml

<ListView col="0" row="2" items="{{ mySecondItems }}" id="myListVw" itemLoading="listViewItemsLoading" itemTap="secondListViewItemTap" class="list-group" separatorColor="transparent">
<ListView.itemTemplate>

<GridLayout class="listGrid" columns="75,*" rows="*" width="100%" height="90" >
  <Label col="0" row="0" class="roundCircle" text="{{ price }}" textWrap="true"  />

  <StackLayout col="1" row="0" orientation="vertical" verticalAlignment="center">
       <Label class="booksubtitle" text="{{ subtitle }}" textWrap="true" id="wow"  />
       <Label class="bookTitle" text="{{ title }}" textWrap="true"  />
       <Label class="addCart" className="{{isClicked?'clickedCart':'notClickedCart'}}" text="&#xf291;" textWrap="true" tap="cartColorChange" />

  </StackLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>

.css

Label.clickedCart{
    color:rgb(171, 0, 230);
}

Label.notClickedCart{
    color:gray;
}

Answer 2

Да, элементы списка действительно используются повторно для экономии памяти.

Здесь вы можете найти подход, используемый для сохранения вашей проблемы, который заключается в привязке элемента списка к определенному свойствув вашей модели.