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

Question

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

那就是我的代码：

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：

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 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

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

    ];
    return gotData;

}

exports.pageLoaded = pageLoaded;

RegisterDetails.js：

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

    exports.pageLoaded = pageLoaded;

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>

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

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

有什么帮助吗？

Answer 1

我们可以在您的代码中处理几件事。

• 用itemTap你的列表视图项目
• 简化上下文的传递，并console.log(contextValue)在不确定要作为对象传递的内容时使用。

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

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

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

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：

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

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;

完整的演示应用程序可以在这里找到