Question

我正在尝试创建一个listview来显示来自硬编码数组列表的数据及其工作正常，但我需要让用户能够点击任何项目以在另一个页面中显示该项目的详细信息，我该怎么做呢？我试图创建另一个数组的细节，并使bindingContext和它的工作正常，但转换到详细信息页面时没有数据显示，你可以看到这里

那是我的代码：

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

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

主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)。

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

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

<强> 主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;
}

<强> 主视-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

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

1 个答案: