在Nativescript中的ViewModel方法上绑定itemTap [英] Binding itemTap on ViewModel method in Nativescript
问题描述
我对Nativescript事件处理感到有些困惑.我正在使用打字稿,将代码和后台模型清晰地分开,并且我试图将itemTap属性绑定到viewmodel方法(就像在
I am a little bit confused with Nativescript event handling. I am using typescript with clear separation of code-behind and viewmodel, and I am trying to bind an itemTap property to a viewmodel method (just like in the example shown in 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();
}
ViewModel:
ViewModel:
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
放在代码后面:
The onItemTapped
method doesn't get fired. If I put onItemTapped
in code-behind:
export function onItemTapped(args): void {
let tappedView: any = args.view;
let tappedItem: any = tappedView.bindingContext;
}
..它按预期工作.在viewModel中使用事件处理程序有什么问题?为什么"HelloWorld"示例如此具有误导性?
.. it works as expected. What is wrong with using event handlers in the viewModel and why is the "HelloWorld" example so misleading?
推荐答案
问题是,在第一种情况下,您的 onItemTapped 来自视图模型.因此,您应该像引用视图模型属性 items 和 name 一样引用它,这意味着使用双大括号:
The thing is that in the first case your onItemTapped is coming from your view-model. So you should reference it just like you are referencing the view-model properties items and name, meaning by using double curly brackets:
<ListView items="{{ items }}" itemTap="{{ onItemTapped }}">
现在,如果 onItemTapped 函数放置在您的代码隐藏文件中,那么您可以直接按照代码中的代码进行引用:
Now, if the onItemTapped function is placed in your code-behind file, then you can reference it directly as written in your code:
<ListView items="{{ items }}" itemTap="onItemTapped">
这篇关于在Nativescript中的ViewModel方法上绑定itemTap的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!