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

Question

我正在尝试创建一个 ListView 来显示来自硬编码数组列表的数据及其工作正常，但我需要让用户能够单击任何项​​目以在另一个页面中显示该项目的详细信息，我该怎么做？我尝试为详细信息创建另一个数组并使 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>

这些细节:

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

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

• 为您的 ListView 项目使用 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;

可以找到完整的演示应用程序 here