Nativescript - 在索引处获取标签 ID

Question

我实际上不知道如何更好地描述这个问题的标题，但我会尽力解释自己：

我正在制作一个应用程序，用户可以在其中订购食物并将其送到家中，所以在某些时候我有一个菜单列表，在这个列表中有食物组（鲑鱼组，组意大利面等......这是一个寿司应用程序）。

假设我选择了鲑鱼，我将有一个如下所示的列表视图：

嗯，你可以看到那里有一个计数器，它的功能我认为很明显，我用于增加食物的代码如下：

<GridLayout row="2" rowSpan="2" col="2" rows="*" columns="40,25,40" verticalAlignment="center" horizontalAlignment="right" marginRight="10">
                    <Label row="0" col="0" text="+" tap="onTapPlus" verticalAlignment="center" horizontalAlignment="center" style="color:black;font-family: 'Allerta Stencil', sans-serif;font-size:20px;"></Label>
                    <Label id="nrItemsTakeAway" row="0" col="1" text="0" verticalAlignment="center" horizontalAlignment="center" style="color:black;font-family: 'Allerta Stencil', sans-serif;font-size:20px;"></Label>
                    <Label row="0" col="2" text="-" tap="onTapMinus" verticalAlignment="center" horizontalAlignment="center" style="color:black;font-family: 'Allerta Stencil', sans-serif;font-size:20px;"></Label>
</GridLayout>

我有一个加号按钮的点击事件，我有一个减号按钮的点击事件，两者都会影响 ID 为 nrItemsTakeAway 的标签...但你是否已经猜到每个 ID 必须是唯一的在列表视图中记录...我将如何区分？

Ps：我正在使用 javascript

问候

Answer 1

如果你使用 NativeScript Core 风格进行开发，你应该使用 Observable 来绑定你的数据。

例如，

视图模型

import { Observable, fromObject } from 'tns-core-modules/data/observable';
import { ObservableArray } from 'tns-core-modules/data/observable-array';

export class HomeViewModel extends Observable {
    items: ObservableArray<Observable> = new ObservableArray([
        fromObject({ name: "Item 1", count: 1 }),
        fromObject({ name: "Item 2", count: 1 }),
        fromObject({ name: "Item 3", count: 1 }),
        fromObject({ name: "Item 4", count: 1 }),
    ]);

    onPlusTap(args) {
        args.object.bindingContext.count += 1;
    }

    onMinusTap(args) {
        args.object.bindingContext.count -= 1;
    }

    constructor() {
        super();
    }
}

XML

<ListView class="list-group" items="{{ items }}">
        <ListView.itemTemplate>
            <FlexboxLayout flexDirection="row" class="list-group-item">
                <Button text="+" class="font-weight-bold" tap="{{ $parents['ListView'].onPlusTap, $parents['ListView'].onPlusTap }}"></Button>
                <Label class="h3" text="{{ count }}"></Label>
                <Button text="-" class="font-weight-bold" tap="{{ $parents['ListView'].onMinusTap, $parents['ListView'].onMinusTap }}"></Button>
            </FlexboxLayout>
        </ListView.itemTemplate>
    </ListView>

现在 items 中的每个 item 都是 Observable，更新属性也会更新 UI 元素。

Answer 2

要实现这一点，您需要使用自定义视图模型和Data Binding，而不是直接操作标签文本值。