Question

我想像这里（https://newsapi.org/）一样从我的SAPUI5应用程序中的News API（https://www.nathanhand.co.uk/blog/post/creating-a-news-app-using-ui5）中获取数据，但是没有express和Node.js。提取过程本身可以正常工作，我从JSON中的API获取了数据。问题似乎是UI5的生命周期，尤其是API数据的异步加载。我目前无法在视图中显示数据，因为数据到达很晚，似乎已使用视图进行了初始化。

我尝试使用“ attachRequestCompleted”事件处理程序，以确保数据在那里并且仅在数据到达时才采取进一步的措施。但这并不能解决问题，数据已正确绑定到视图，但似乎为时已晚。

return Controller.extend("newsapitest.newsapitest.controller.View1", {
    onInit: function () {
        var thisContext = this;

        var articleModel = new JSONModel("https://newsapi.org/v2/top-headlines?country=DE&category=business&apiKey=*********");

        articleModel.attachRequestCompleted(function(oEvt) {
             var model = oEvt.getSource();
             thisContext.getView().setModel(model, "articles");
        });
    }
});


<content>
    <GenericTile backgroundImage="{articles>/1/urlToImage}"
    frameType="TwoByOne" press="onArticlePress">
        <TileContent footer="{articles>/1/publishedAt}">
            <NewsContent contentText="{articles>/1/title}" 
            subheader="{articles>/1/description}" />
        </TileContent>
     </GenericTile>
</content>

因此，我期望视图中的图块将显示模型中存储的每篇文章的信息。但目前只有一个空白磁贴，并且那里没有数据显示。

解决方案 我在将模型绑定到控件上时犯了一个错误。那是一个错误。我更改的另一件事是如何将数据加载到模型中。

return Controller.extend("newsapitest.newsapitest.controller.View1", {
    onInit: function () {
        var articleModel = new JSONModel();
        articleModel.loadData("https://newsapi.org/v2/top-headlines?country=DE&category=business&apiKey=37a02aae93684d58810e0b996954f534");
        this.getView().setModel(articleModel);
    },
});

<content>
                  <GenericTile
                        backgroundImage="{/articles/0/urlToImage}"
                        frameType="TwoByOne" press="onArticlePress">
                    <TileContent footer="{/articles/0/publishedAt}">
                        <NewsContent
                                contentText="{/articles/0/title}"
                                subheader="{/articles/0/description}" />
                    </TileContent>
                </GenericTile>
            </content>

Answer 1

您检查绑定路径是否正确？无论如何，您进行绑定的方式只会创建一个图块，其信息存储在文章数组的第二个位置（位置1）上。

如果要根据数组的位置数动态创建多个图块，我认为您不能使用“通用图块”组件，而是可以使用“瓷砖容器”，如下所示（这是一个已弃用的组件，但我认为没有其他办法，至少在视图上是这样的：

<TileContainer
            tiles="{articles>/}">
            <StandardTile
                title="{articles>title}"
                info="{articles>publishedAt}"
                infoState="{articles>description}" />
</TileContainer>

如果其他人知道一种不使用不推荐使用的组件的方法，那就太好了：

如何正确绑定异步。从新闻API加载数据到视图并以内容形式显示数据？

1 个答案: