在 Nativescript 中的 ViewModel 方法上绑定 itemTap答案

【问题标题】：Binding itemTap on ViewModel method in Nativescript在 Nativescript 中的 ViewModel 方法上绑定 itemTap
【发布时间】：2018-11-26 07:34:52
【问题描述】：

我对 Nativescript 事件处理有点困惑。我正在使用 typescript 将代码隐藏和视图模型明确分离，并且我正在尝试将 itemTap 属性绑定到 viewmodel 方法（就像在https://github.com/NativeScript/template-hello-world-ts/blob/master/main-view-model.ts 中显示的示例一样）。

XML：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" loaded="pageLoaded" class="page">
  <StackLayout>
    <ListView items="{{ items }}" itemTap="onItemTapped">
      <ListView.itemTemplate>
        <Label text="{{ Name }}"/>
      </ListView.itemTemplate>
    </ListView>
  </StackLayout>
</Page>

代码隐藏：

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { EditItemViewModel } from '../../ViewModels/EditItemViewModel';

export function navigatingTo(args: EventData) {
    let page = <Page>args.object;
    page.bindingContext = new EditItemViewModel();
}

视图模型：

import { Observable } from 'data/observable';
import { ObjectRelationalMapper } from '../Common/Data'
import { WebServiceDataManager } from '../Common/Data'

import { Item } from '../Models/Item';

export class EditItemViewModel extends Observable {
  _wsDataManager: WebServiceDataManager;
  _orm: ObjectRelationalMapper;
  _items: Array<Item>;

  get items(): Array<Item> {
    return this._items;
  }

  set items(items: Array<Item>) {
    this._items = items;
  }

  constructor() {
    super();
    this._wsDataManager = new WebServiceDataManager();
    this._orm = new ObjectRelationalMapper();
    this.listAllItems();
  }

  private listAllItems(): void {
    this._orm.getAllObjects(Item, this, this.onItemsReceived)
  }

  public onItemsReceived(items: Array<Item>) {
    this._items = items;
    this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: 'items', value: this._items });
  }

  public onItemTapped(args): void {
    let tappedView: any = args.view;
    let tappedItem: Item = tappedView.bindingContext;
  }
}

onItemTapped 方法不会被触发。如果我将onItemTapped 放在代码隐藏中：

export function onItemTapped(args): void {
    let tappedView: any = args.view;
    let tappedItem: any = tappedView.bindingContext;
}

.. 它按预期工作。在 viewModel 中使用事件处理程序有什么问题？为什么“HelloWorld”示例如此具有误导性？

【问题讨论】：

标签： typescript nativescript

【解决方案1】：

问题是，在第一种情况下，您的 onItemTapped 来自您的视图模型。所以你应该像引用视图模型属性 items 和 name 一样引用它，这意味着使用双花括号：

<ListView items="{{ items }}" itemTap="{{ onItemTapped }}">

现在，如果 onItemTapped 函数被放置在您的代码隐藏文件中，那么您可以直接在代码中引用它：

<ListView items="{{ items }}" itemTap="onItemTapped">

【讨论】：