how to get context of a tapped list item to show details in another page in Nativescript

Question

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

thats my code :

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>

these for details:

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>

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?

Answer 1

There are several things we can address in your code.

• use itemTap for 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

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

Full demo application can be found here