Sending dynamic values inside context in nativescript

Question

i'm using nativescript to build a basic app but i'm stuck sending the context between pages.
I'm listing a serie of items in page1 that i get from an http request and what i want to achieve is send the id of the item into the context to make an http request and render the response in page2.
Here is my approach:

page1.xml (this page is injected into a tabviewitem)

<StackLayout class="tab-content" loaded="onViewLoaded">
    <GridLayout rows="auto, *">
        <ListView items="{{ motels }}"
                  row="1"
                  id="motelsList"
                  motelId="{{ id }}"
                  name="{{ name }}"
                  itemTap="goToMotelDetail">
            <ListView.itemTemplate>
                <GridLayout columns="auto, *">
                    <GridLayout columns="auto" rows="auto" class="icon-wrap">
                        <Image width="70" height="70" src="http://fpoimg.com/70x70" stretch="fill" css="icon-image" />
                    </GridLayout>
                    <StackLayout col="1" verticalAlignment="center">
                        <Label text="{{ name }}" textWrap="true" class="motel-name" />
                        <Label text="{{ address }}" textWrap="true" class="motel-address" />
                    </StackLayout>                   
                </GridLayout>
            </ListView.itemTemplate>
        </ListView>
        <ActivityIndicator busy="{{ isLoading }}" row="1" horizontalAlignment="center" />
    </GridLayout>
</StackLayout>

page1.js

exports.goToMotelDetail = function(args) {
    var id = args.object.motelId;
    var name = args.object.name;
    var navigationEntry = {
        moduleName: "views/motel-detail/motel-detail",
        context: {
            info: "some string to test",
            id: id,
            name: name
        },
        animated: false
    };
    var topmost = frameModule.topmost();
    topmost.navigate(navigationEntry);
}

page2.xml

<Page  navigatedTo="navigatedTo">
    <Page.ActionBar>
        <ActionBar title="{{ name }}" />
    </Page.ActionBar>
    <Label text="Motel detail" />
</Page>

page2.js

exports.navigatedTo = function (args) {
  var page = args.object;
  var dataItem = page.navigationContext;
  page.bindingContext = dataItem;
};

The thing is: when i click on an item the app navigate to page2, but doesn't show the name tha was sent within the context and if i try with info, it works.
I can't figure out how to make it work.
Thanks in advance

Dean Le · Accepted Answer · 2016-07-29 11:23:15Z

I think that is because you did not get the name from args.object.name. Have you tried to console.log the id and the name? The reason it show the info is that because you set the info in the context to a string, while the name might be nothing.

I also think there is something wrong here in your code:

<ListView items="{{ motels }}"
              row="1"
              id="motelsList"
              motelId="{{ id }}"
              name="{{ name }}"
              itemTap="goToMotelDetail">

ListView does not have such properties "motelId" or "name", and these are also should be inside the ListView.itemTemplate as I understand.

One more thing, you put the "itemTap" inside the ListView tags. It mean that the object that you get from the args.object will be the instance of ListView, which does not have such a property like name thus you don't have the name sent to page2

When I console.log the name and id I get [object object], but if I move the function to a label and put the name and id as a label property I get the right values

Collectives™ on Stack Overflow

Sending dynamic values inside context in nativescript

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related