[英]how to get context of a tapped list item to show details in another page in Nativescript
i am trying to create a listview to show data from hardcoded array list and its working good , but i need to make user able to click on any item to show the details of this item in another page , how can i do that ? 我正在尝试创建一个列表视图,以显示硬编码数组列表中的数据及其工作情况,但是我需要使用户能够单击任何项目以在另一页中显示该项目的详细信息,我该怎么做? i tried to create another array for details and make bindingContext and its working good but no data show when converting to details page as you can see here 我试图为细节创建另一个数组,并使bindingContext及其工作正常,但在转换为细节页面时没有数据显示,如您在此处看到的
thats my code : 多数民众赞成在我的代码:
main-view-model.js: 主视野-model.js:
var Observable = require("data/observable").Observable;
function RegisterViewModel() {
var viewModel = new Observable();
viewModel.shows = [
{name:"Reg1"},
{name:"Reg2"},
{name:"Reg3"},
{name:"Reg4"},
{name:"Reg5"},
];
return viewModel;
}
exports.RegisterViewModel = RegisterViewModel;
main-page.js: 主page.js:
var RegisterViewModel = require("./main-view-model").RegisterViewModel;
var frameModule = require('ui/frame');
var viewModel = new RegisterViewModel();
function RegisterViewModel(args) {
var page = args.object;
page.bindingContext = RegisterViewModel();
}
exports.getInfo = function (args) {
var navigationEntry = {
moduleName: "RegisterDetails",
context: {info:args.view.bindingContext}
}
frameModule.topmost().navigate(navigationEntry);
}
exports.loaded = function(args){
args.object.bindingContext = viewModel;
}
exports.RegisterViewModel = RegisterViewModel;
main-page.xml: 主page.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page" loaded="loaded">
<Page.actionBar>
<ActionBar title="My App" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout class="p-20">
<SearchBar id="searchBar" hint="Search" text="" clear="onClear" submit="onSubmit" />
<TabView>
<TabView.items>
<TabViewItem title="register">
<TabViewItem.view>
<ListView items="{{shows}}" tap="getInfo" >
<ListView.itemTemplate>
<Label text="{{name}}" />
</ListView.itemTemplate>
</ListView>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 2">
<TabViewItem.view>
<Label text="Label in Tab2" />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</StackLayout>
</Page>
these for details: 这些详细信息:
RegisterDetails-model.js RegisterDetails-model.js
viewModel.shows = [
{name:"Reg01"},
{name:"Reg02"},
{name:"Reg03"},
{name:"Reg04"},
{name:"Reg05"},
];
return gotData;
}
exports.pageLoaded = pageLoaded;
RegisterDetails.js: RegisterDetails.js:
var gotData;
function pageLoaded(args) {
var page = args.object;
gotData = page.navigationContext.info;
page.bindingContext={passedData:gotData}
}
exports.pageLoaded = pageLoaded;
RegisterDetails.xml: RegisterDetails.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page" loaded="pageLoaded">
<Page.actionBar>
<ActionBar title="Register" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout >
<Label text="{{name}}" />
</StackLayout>
</Page>
but when i clicked on any item i go to register details but no data shows in page , and i received this message error in console : 但是,当我单击任何项目时,我都会注册详细信息,但页面中未显示任何数据,并且我在控制台中收到此消息错误:
JS: Binding: Property: 'name' is invalid or does not exist. SourceProperty: 'name'
any help? 有什么帮助吗?
There are several things we can address in your code. 我们可以在您的代码中处理几件事。
itemTap
for your listview items 将itemTap
用于您的列表视图项目 console.log(contextValue)
when unsure what you are passing as an object. 简化上下文的传递,并在不确定要作为对象传递的内容时使用console.log(contextValue)
。 For example here is a refactored version of your code that follows both rules just to demonstrate how to deal with passing teh context. 例如,这里是代码的重构版本,它遵循这两个规则,只是为了演示如何处理传递的上下文。
main-page.xml 主page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page" loaded="loaded">
<StackLayout class="p-20">
<SearchBar id="searchBar" hint="Search" text="" clear="onClear" submit="onSubmit" />
<TabView>
<TabView.items>
<TabViewItem title="register">
<TabViewItem.view>
<ListView items="{{ shows }}" itemTap="getInfo" >
<ListView.itemTemplate>
<Label text="{{ name }}" />
</ListView.itemTemplate>
</ListView>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 2">
<TabViewItem.view>
<Label text="Label in Tab2" />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</StackLayout>
</Page>
main-page.js 主page.js
var RegisterViewModel = require("./main-view-model").RegisterViewModel;
var frameModule = require('ui/frame');
var viewModel = new RegisterViewModel();
exports.getInfo = function (args) {
var info = args.view.bindingContext;
console.log(info); // [Object object]
console.log(info["name"]); // e.g. info["name"] === "Reg4"
// info is Object of type { name: "Reg4" }
var navigationEntry = {
moduleName: "RegisterDetails",
context: { name: info["name"] }
}
frameModule.topmost().navigate(navigationEntry);
}
exports.loaded = function (args) {
args.object.bindingContext = viewModel;
}
main-view-model.js 主视野-model.js
var Observable = require("data/observable").Observable;
function RegisterViewModel() {
var viewModel = new Observable();
viewModel.shows = [
{ name: "Reg1" },
{ name: "Reg2" },
{ name: "Reg3" },
{ name: "Reg4" },
{ name: "Reg5" },
];
return viewModel;
}
exports.RegisterViewModel = RegisterViewModel;
RegisterDetails.xml: RegisterDetails.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page" loaded="pageLoaded">
<StackLayout>
<Label text="{{ passedData.name }}" />
</StackLayout>
</Page>
RegisterDetails.js: RegisterDetails.js:
function pageLoaded(args) {
var page = args.object;
var receivedContext = page.navigationContext;
console.log(receivedContext); // receiving object like { name : "Reg3"} here e.g. receivedContext === { name: "Reg3"}
page.bindingContext = { passedData: receivedContext }; // now the binding context is passedData.name
}
exports.pageLoaded = pageLoaded;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.