如何获取抽头列表项的上下文以在Nativescript中的另一页中显示详细信息 [英] how to get context of a tapped list item to show details in another page in Nativescript
问题描述
我正在尝试创建一个listview来显示来自硬编码数组列表的数据及其工作正常，但我需要让用户能够点击任何项目以在另一个页面中显示该项目的详细信息，我该怎么做呢？我试图创建另一个数组的细节，并使bindingContext及其工作良好，但转换到详细信息页面时没有数据显示，你可以看到这里
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
这是我的代码：
main-view-model.js：
main-view-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：
main-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：
main-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>
详细信息如下：
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'
任何帮助？
推荐答案
我们可以在您的代码中解决几件事。
There are several things we can address in your code.
- 使用
itemTap查看列表视图项目 - 简化上下文的传递并使用
console.log（contextValue）当不确定你传递的对象是什么时。
- use
itemTapfor your listview items - simplify the passing of context and use
console.log(contextValue)when unsure what you are passing as an object.
例如这里是一个重构的代码版本，遵循这两个规则只是为了演示如何处理传递上下文。
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
main-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
main-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
main-view-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;
可以找到完整的演示应用程序这里
Full demo application can be found here
这篇关于如何获取抽头列表项的上下文以在Nativescript中的另一页中显示详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
