3

假设我有想要在屏幕上显示的项目列表。每个项目都应显示为具有项目 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); }"
4

1 回答 1

5

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

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

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

function remove(args) {
   var btn = args.object;
   var item = btn.bindingContext;
}
于 2015-03-30T11:51:20.423 回答