在ListView项目模板中为按钮添加事件处理程序，并传递其他参数

Question

假设我有要在屏幕上显示的项目列表。每个项目都应显示为具有项目ID，名称和值的行。此外，应该有一个按钮，允许用户从列表中删除该项目。

这是项目模型：

import observableModule = require("data/observable");

class ItemModel extends observableModule.Observable {
    constructor(id: number, name: string, value: string) {
        super();

        this.set("id", id);
        this.set("name", name);
        this.set("value", value);
    }

    remove() {
        console.log("inside remove method in item model");
    }
}

export = ItemModel;

这是页面视图模型：

import observableModule = require("data/observable");
import observableArrayModule = require("data/observable-array");
import itemModel = require("./itemModel");

class BindingsTestViewModel extends observableModule.Observable {
    items: observableArrayModule.ObservableArray<itemModel>;

    constructor() {
        super();

        this.items = new observableArrayModule.ObservableArray<itemModel>();

        this.items.push(new itemModel(100, "Item 1", "Value 1"));
        this.items.push(new itemModel(101, "Item 2", "Value 2"));
        this.items.push(new itemModel(102, "Item 3", "Value 3"));
        this.items.push(new itemModel(103, "Item 4", "Value 4"));
    }

    remove() {
        console.log("inside remove method in main VM");
    }
}

export = BindingsTestViewModel;

最后，这是视图：

<Page loaded="load">
    <StackLayout orientation="vertical">
        <ListView items="{{ items }}">
            <ListView.itemTemplate>
                <GridLayout columns="50px,*,*,auto" cssClass="itemContainer" >
                   <Label col="0" text="{{ '#' + id }}" cssClass="itemId" />
                   <Label col="1" text="{{ name }}" cssClass="itemName"/>
                   <Label col="2" text="{{ value }}" />
                   <Button col="3" cssClass="deleteButton" text="Delete" tap="{{ remove }}">
                    </Button>
                </GridLayout>
            </ListView.itemTemplate>
         </ListView>
    </StackLayout>
</Page>

实例化viewModel并在页面加载时将其分配给page.bindingContext。项目列表是可观察数组，并且绑定到ListView小部件。如您所见，项目模板中有一个按钮，该按钮具有为点击事件-定义的事件处理程序tap="{{ remove }}"。

因此，当我单击“删除”按钮时，在页面视图模型（父级）而不是项目模型上调用remove（）方法。这是非常出乎意料的，因为文本绑定的相同句柄语法会导致从当前项目模型获取值。这意味着数据绑定声明和事件处理程序声明的上下文不同。text={{ name }}

问题

1. 是否可以将绑定到当前项目的函数注册为事件处理程序？
2. 是否可以将其他参数传递给事件处理函数。例如，将项目的ID传递给删除功能，这样我就可以识别该项目并将其从列表中删除。我尝试了以下方法，但是它们都不起作用：
   • tap="{{ remove(id) }}"
   • tap="{{ function() { remove(id); } }}"
   • tap="remove(id)"
   • tap="function() { remove(id); }"

Answer 1

实际上，您可以将视图模型中的函数用作事件处理程序：

...tap="{{ remove }}"...

并且您可以像这样访问UI元素和bindingContext：

function remove(args) {
   var btn = args.object;
   var item = btn.bindingContext;
}