Sapui5 如何正确绑定异步。将数据从新闻API加载到视图,并将数据显示为内容?

Sapui5 如何正确绑定异步。将数据从新闻API加载到视图,并将数据显示为内容?,sapui5,Sapui5,我想从SAPUI5应用程序中的新闻API()中获取数据,就像在这里完成()一样,但不使用express和Node.js。抓取过程本身可以工作,我从JSON中的API获取数据。问题似乎在于UI5的生命周期,特别是API数据的异步加载。我现在无法在视图中显示数据,因为它来得太晚,似乎是用视图初始化的 我尝试使用“attachRequestCompleted”事件处理程序,以确保数据存在,并且只有在数据到达时才采取进一步的操作。但这并没有解决问题,数据被正确地绑定到视图,但似乎为时已晚 return

我想从SAPUI5应用程序中的新闻API()中获取数据,就像在这里完成()一样,但不使用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>
返回Controller.extend(“newsapitest.newsapitest.Controller.View1”{
onInit:function(){
var thisContext=这个;
var articleModel=新的JSONModel(“https://newsapi.org/v2/top-headlines?country=DE&category=business&apiKey=*********");
articleModel.attachRequestCompleted(功能(oEvt){
var model=oEvt.getSource();
thisContext.getView().setModel(模型,“文章”);
});
}
});
因此,我希望视图中的平铺将显示存储在模型中的每个项目的信息。但目前只有一个空的磁贴,没有显示任何数据

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

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>
返回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);
},
});

是否检查了绑定路径是否正确?无论如何,您进行绑定的方式只会创建一个磁贴,其中的信息存储在文章数组的第二个位置(位置1)上

如果您想根据阵列的位置数量动态创建多个平铺,我认为您不能使用“通用平铺”组件,而是可以使用“平铺容器”,如下所示(这是一个不推荐使用的组件,但我认为没有其他方法可以这样做,至少在视图上):



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

您在绑定路径上的提示很有用,其中有一个错误。关于你文章的第二部分,原始代码/帖子的作者用网格实现了它,如果你愿意,你可以在上面的链接中查看解决方案。我在视图中将模型绑定到控件时出错,我用解决方案更新了我的原始帖子。
<TileContainer
            tiles="{articles>/}">
            <StandardTile
                title="{articles>title}"
                info="{articles>publishedAt}"
                infoState="{articles>description}" />
</TileContainer>