如何获取点击列表项的上下文以在 Nativescript 中的另一个页面中显示详细信息

我正在尝试创建一个列表视图来显示硬编码数组列表中的数据及其工作良好，但我需要使用户能够单击任何项​​目以在另一个页面中显示该项目的详细信息，我该怎么做？我尝试创建另一个数组来获取详细信息，并使 BindingContext 及其工作正常，但在转换到详细信息页面时没有数据显示，如您在此处看到的

这就是我的代码：

主视图模型.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：

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;

主页.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>

详细信息如下：

注册详情-model.js

    viewModel.shows = [
        {name:"Reg01"},
        {name:"Reg02"},
        {name:"Reg03"},
        {name:"Reg04"},
        {name:"Reg05"},

    ];
    return gotData;

}

exports.pageLoaded = pageLoaded;

注册详细信息.js：

var gotData;
function pageLoaded(args) {
     var page = args.object;
     gotData = page.navigationContext.info;
     page.bindingContext={passedData:gotData}
    }

    exports.pageLoaded = pageLoaded;

注册详细信息.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>

但是当我单击任何项​​目时，我会转到注册详细信息，但页面中没有显示数据，并且我在控制台中收到此消息错误：

JS: Binding: Property: 'name' is invalid or does not exist. SourceProperty: 'name'

有什么帮助吗？

我们可以在您的代码中解决一些问题。

• use itemTap对于您的列表视图项目
• 简化上下文的传递和使用console.log(contextValue)当不确定您作为对象传递的内容时。

例如，这里是代码的重构版本，它遵循这两个规则，只是为了演示如何处理传递上下文。

主页.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>

主页.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;
}

主视图模型.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;

注册详细信息.xml：

 <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page" loaded="pageLoaded">
    <StackLayout>
        <Label text="{{ passedData.name }}" />
    </StackLayout>
</Page>

注册详细信息.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;

可以找到完整的演示应用程序here https://github.com/NickIliev/NS-Issues/tree/master/stackoverflow/tappedContext