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 }}"。

所以，当我点击＆＃34;删除＆＃34;按钮，页面视图模型（父级）和非项目模型上调用 remove（）方法。这是非常意外的，因为文本绑定的相同句柄语法 - text={{ name }}会导致从当前项模型中获取值。这意味着数据绑定声明和事件处理程序声明的上下文不一样。

问题

是否可以将绑定到当前项目的函数注册为事件处理程序？
是否可以将其他参数传递给事件处理函数。例如。将项目的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;
}

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

问题

1 个答案: