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必须对每个ID都是唯一的记录在列表视图中... 我将如何区分呢？

Ps：我正在使用javascript

致谢

Answer 1

如果您使用NativeScript Core进行开发，则应使用Observable绑定数据。

例如，

ViewModel

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>

item中的每个项目现在都是可观察的，更新属性也会更新UI元素。

Answer 2

要实现此目的，您需要使用自定义视图模型和Data Binding，而不是直接操纵Label文本值。

Nativescript-在索引处获取标签ID

2 个答案: