本机脚本应用程序。在 XML 中显示项目的困难答案

【问题标题】：Nativescript app. Difficulties with displaying items in the XML本机脚本应用程序。在 XML 中显示项目的困难
【发布时间】：2017-10-25 18:17:40
【问题描述】：

我正在使用 Nativescript 构建一个应用程序。显示 RSS 帖子。

我在如何在 XML 中显示解析的对象时遇到了一些困难。

这是我的 rss-list-view-model.js

var observable = require('data/observable');
var ObservableArray = require('data/observable-array').ObservableArray;
var fetchModule = require('fetch');
var config = require('../config');

function handleErrors(response) {
    if (!response.ok) {
        console.log(JSON.stringify(response));
        throw Error(response.statusText);
    }
    return response;
}

exports.empty = function() {
    while (feedItems.length) {
        feedItems.pop();
    }
};

exports.load = function name(params) {
    console.log('CALLING LOAD');
    //handle caching
    if(feedItems.length > 0) {
        console.log('leaving early');
        return;
    }

    return fetch('https://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%2Cdescription%20from%20rss%20where%20url%3D%22'+encodeURIComponent(config.rssURL)+'%22&format=json&diagnostics=true', {
    })
    .then(handleErrors)
    .then(function(response) {
        return response.json();
    }).then(function(data) {
        console.log('number of rss entries: '+data.query.results.item.length);
        data.query.results.item.forEach(function(feedItem) {
            feedItems.push({
                        title: feedItem.title,
                        link: feedItem.link,
                        description: feedItem.description
                    }
            );
        });
    });

}

var feedItems = new ObservableArray();
exports.feedItems = feedItems;

var viewModel = new observable.Observable();
exports.viewModel = viewModel;

这是我的 main-page.xml：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="loaded">

    <Page.actionBar>
        <ActionBar title="{{ title }}" />
    </Page.actionBar>


        <ListView items="{{ rssList.feedItems }}" itemTap="loadItem">
            <ListView.itemTemplate>
                <Label text="{{ title }}" horizontalAlignment="left" verticalAlignment="center" />
            </ListView.itemTemplate>
        </ListView>
</Page>

当我在这个函数中转储我的对象时，它会在控制台中显示它们。

.then(function(data) {
        console.log('number of rss entries: '+data.query.results.item.length);
        data.query.results.item.forEach(function(feedItem) {
            feedItems.push({
                        title: feedItem.title,
                        link: feedItem.link,
                        description: feedItem.description
                    }
            );
        });

这是我的主页.js

var RssListViewModel = require('../shared/view-models/rss-list-view-model');
var frameModule = require('ui/frame');

var config = require('../shared/config');

var Observable = require('data/observable').Observable;
var viewModule = require('ui/core/view');
var page;

var pageData = new Observable({
    rssList:RssListViewModel,
    title:config.title
});

exports.loaded = function(args) {
    page = args.object;
    page.bindingContext = pageData;
    RssListViewModel.load();
};

exports.loadItem = function(args) {
    //rssList.viewModel.set('selectedItem', args.view.bindingContext);
    RssListViewModel.viewModel.set('selectedItem', args.view.bindingContext);
    frameModule.topmost().navigate('views/item-page');
}

为什么不能在视图中显示？

【问题讨论】：

标签： nativescript

【解决方案1】：

问题在于，当您将模型绑定到视图时，尚未获取项目，因此没有要渲染的内容。

有很多方法可以解决这个问题，其中一种可能是： 1) 让rss-list-view-model.js 的load 方法返回一个Promise。 2) 在main-page.js 的loaded 方法中执行如下操作：

RssListViewModel.load().then(function(data){
    page.bindingContext = pageData;
});

【讨论】：