时间戳

首页 > 解决方案 > Nativescript - 在索引处获取标签 ID

nativescript - Nativescript - 在索引处获取标签 ID

问题描述

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

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

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

在此处输入图像描述

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

<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 必须是唯一的listview ...我将如何区分这个？

ps：我用的是javascript

问候

标签： nativescript

解决方案

如果你使用 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 中的每个项目现在都是一个 Observable，更新属性也会更新 UI 元素。

推荐阅读