无法在视图中加载Nativescript HTTP数据

Question

我正在尝试遵循有关Nativescript的本教程：http://www.beer-tutorials.org/2015/12/01/NativeScript-Beers/

这是我的代码：

main-page.ts

var http = require("http");
var observableArray = require("data/observable-array");
var beerList = new observableArray.ObservableArray([]);
var observableModule = require("data/observable");
var pageData = new observableModule.Observable();

exports.beers = function() {
    http.getJSON("http://www.beer-tutorials.org/beers/beers.json").then(function(r) {
        // console.log(JSON.stringify(r));
        for (var i = 0; i< r.length; i++) {
            var beer = { name: r[i].name, description: r[i].description, alcohol: r[i].alcohol } 
            beerList.push(beer);
        }
        // console.log(beerList)
    }, function(e) {

        console.log(e);

    });
  };

  function pageLoaded(args) {
    var page = args.object;
    pageData.set("beerList", beerList);
    // it links an xml "beerList" variable to a js beerList variable
    page.bindingContext = pageData;
} 

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
    <!--
    The ActionBar is the NativeScript common abstraction over the Android ActionBar and iOS NavigationBar.
    http://docs.nativescript.org/ui/action-bar
    -->
    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout orientation="vertical">
        <Button text="Get beer list" height="50px" tap="beers" style="width:300px;border:none;font-size:20px;" />
            <ListView items="{{ beerList }}" >
            <ListView.itemTemplate>
            <StackLayout orientation="vertical">
                <Label id="name" text="{{name}}" class="beerName" />
                <Label id="description" text="{{ description }}" textWrap="true" />
            </StackLayout>
            </ListView.itemTemplate>
            </ListView>
    </StackLayout> 
</Page>

当我单击“获取啤酒清单”按钮时，屏幕上什么都没有。我可以在main-page.ts中console.log并查看json数据通过，所以我知道这很好。我怀疑数据没有从main-page.ts转到main-page.xml。任何帮助表示赞赏。

Answer 1

好像您的pageLoaded方法回调既不从XML导出也不从XML调用。相反，您的XML中有一个navigatingTo侦听器，它似乎从未在JS中定义。您只需修复其中一个。

Answer 2

以下是此修复程序的代码，以防它帮助其他人。请注意，在main-page.tx中为pageLoaded函数添加了export关键字，在main-page.xml中还添加了loaded="onPageLoaded"。此处更多信息：https://docs.nativescript.org/ui/ns-ui-widgets/page

main-page.ts

var http = require("http");
var observableArray = require("data/observable-array");
var beerList = new observableArray.ObservableArray([]);
var observableModule = require("data/observable");
var pageData = new observableModule.Observable();

exports.beers = function() {
    http.getJSON("http://www.beer-tutorials.org/beers/beers.json").then(function(r) {
        // console.log(JSON.stringify(r));
        for (var i = 0; i< r.length; i++) {
            var beer = { name: r[i].name, description: r[i].description, alcohol: r[i].alcohol } 
            beerList.push(beer);
        }
        // console.log(beerList)
    }, function(e) {
        console.log(e);
    });
  };

  export function pageLoaded(args) {
    var page = args.object;
    pageData.set("beerList", beerList);
    // it links an xml "beerList" variable to a js beerList variable
    page.bindingContext = pageData;
} 

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onPageLoaded" class="page">
    <!--
    The ActionBar is the NativeScript common abstraction over the Android ActionBar and iOS NavigationBar.
    http://docs.nativescript.org/ui/action-bar
    -->
    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout orientation="vertical">
        <Button text="Get beer list" height="50px" tap="beers" style="width:300px;border:none;font-size:20px;" />
            <ListView items="{{ beerList }}" >
            <ListView.itemTemplate>
            <StackLayout orientation="vertical">
                <Label id="name" text="{{name}}" class="beerName" />
                <Label id="description" text="{{ description }}" textWrap="true" />
            </StackLayout>
            </ListView.itemTemplate>
            </ListView>
    </StackLayout> 
</Page>