时间戳

首页 > 解决方案 > 如何从 Nativescript/JS 中的 ListView 点击事件传递/接收项目详细信息？

nativescript - 如何从 Nativescript/JS 中的 ListView 点击事件传递/接收项目详细信息？

问题描述

我想做的（我认为）是从itemTap事件中获取store.id并将其与.navigate()一起传递，以便我可以使用它来获取详细信息页面的正确数据，但是我无法弄清楚如何获得点击的项目。

我有一个 list-page.xml：

 <Page loaded="loaded" xmlns:lv="nativescript-ui-listview">
<ActionBar title="Bars"></ActionBar>
<GridLayout>
    <ListView items="{{ storeList }}" row="1" itemTap="showDetail">
        <ListView.itemTemplate >
            <GridLayout class="grocery-list-item" >
                <Label class="p-15" text="{{ name }}" />
            </GridLayout>
        </ListView.itemTemplate>
    </ListView>
</GridLayout>

和 list-page.js：

var dialogsModule = require("tns-core-modules/ui/dialogs");
var observableModule = require("tns-core-modules/data/observable");
var ObservableArray = require("tns-core-modules/data/observable-array").ObservableArray;
var page;
var StoreListViewModel = require("../shared/view-models/store-list-view-model");
var frameModule = require("tns-core-modules/ui/frame");
var storeList = new StoreListViewModel([]);
var pageData = new observableModule.fromObject({
    storeList:storeList
});
exports.loaded = function (args) {
    page = args.object;
    page.bindingContext = pageData;
    sindex = args.object.bindingContext;

    storeList.empty();
    storeList.load();
};
exports.showDetail = function() {
    frameModule.topmost().navigate("views/detail/detail-page");
};

storeList 来自我的 api，并成功发回由 listview 呈现的商店列表。

我查看了十几个其他教程/问题，其中几个似乎提到从 args.index 或 args.object.bindingContext 获取它，但是当我从 showDetail 函数中获取它时，它是未定义的. console.log(args.object.bindingContext) 给了我一堆数据，但无论我点击哪一行，它都是相同的......

CONSOLE LOG file:///app/bundle.js:359:12: {
"_observers": {
"propertyChange": [
{}
]
},
"_map": {
"storeList": {
"_observers": {
"change": [
{}
]
},
"_array": [
{
"name": "Hipster's Coffee",
"address": "2200 Broadway, Oakland, CA 94612",
"id": 2
},
{
"name": "Suzy's Stationary",
"address": "630 Divisadero St., San Francisco, CA 94117",
"id": 3
}
],
"_addArgs": {
"eventName": "change",
"object": "[Circular]",
"action": "add",
"index": 1,
"removed": [],
"addedCount": 1
},
"_deleteArgs": {
"eventName": "change",
"object": "[Circular]",
"action": "delete",
"index": null,
"removed": null,
"addedCount": 0
}
}
},
"storeList": "[Circular]"
}

我对 NativeScript 很陌生，所以显然我在这里遗漏了一些简单的东西。

标签： nativescript

解决方案

  <ListView items="{{ storeList }}" row="1" itemTap="{{showDetail}}">

看看这里的示例游乐场。

推荐阅读