我已经按照教程进行操作,现在我正在尝试将该学习扩展到真正的应用程序中。在我的应用程序中,我使用JSON模型。与教程不同,我的是一个真实世界的应用程序,当我加载数据模型时,我必须获取用户凭据作为过滤器。在教程中,模型加载到component.js中。在我的应用程序中,我必须提示用户输入id和密码,因此我有一个登录片段,它以模态方式显示在应用程序的第一个视图中。这恰好是一个主视图,关键是它在 component.js之后运行。在验证用户之后,我通过Ajax从服务器收集JSON数据,并通过this.setData(my_json)将其放入默认模型。
在测试从主视图到详细视图的路由时,我产生了一个顽固的错误,即在详细视图中调用this.getModel()会产生一个空模型。嗯 - 我只是在主视图中设置模型,可以看到表格控件中的数据 - 给出了什么?
我考虑了路由问题但确认不是问题 - 我可以控制日志记录通过路由器的参数,无论如何都会显示详细信息视图,因此路由正常。
回顾:我在主页面中使用this.setModel(),然后在详细信息页面中使用this.getModel(),但后者是一个空模型。
问题:我希望该模型可以在整个应用中使用。教程侧重于在component.js中设置模型,但我不能。例如,从主视图或任何其他不是component.js的地方设置全局模型的正确语法是什么。
我想我需要在master中使用以下内容(最后一行很重要):
var oModel = new JSONModel(); // declare a JSON model
oModel.setData(<json string>); // load a JSON string fetched from serve etc.
sap.ui.getCore().setModel(oModel); // important - set as the core model
我认为我的困惑的根源在于,在教程中似乎通过
在组件中设置模型this.setModel(oModel); // a line in component.js
因此我假设component.js上下文中的 this 是app-global,而视图中的 this 与视图相关,这是有道理的。我是对的吗?
答案 0 :(得分:3)
在Component.js中的教程this.setModel(...)
中,将直接在Component上设置模型。因此,该模型在该Component内的所有视图中都可见。
当您在控制器中看到this.getView().setModel(...)
时,您知道该模型仅在该视图上设置(因此对于它的孩子也是如此)。
但是,如果您在控制器中看到类似this.setModel(...)
的内容,则应检查this.setModel(...)
内发生的情况。模型可能在视图上,组件上,甚至在其他地方设置!一些教程使用了所谓的&#34; BaseController&#34;概念。这基本上是其他控制器的父控制器,因此这种方法允许编写一些方便的API,您可以在从这个BaseController扩展的子控制器中轻松地重用它们。例如,看一下BaseController of the Worklist App。在那里,您可以看到setModel(...)
API正在视图上设置模型。这意味着无论何时在控制器中调用this.setModel(...)
,从该BaseController扩展,您的模型都会在视图上设置!
此外,因为在Master-Detail应用程序中,Master和Details页面(父/子关系)之间没有层次结构,Master视图上的模型在Detail视图上不可见。
在您的情况下,似乎最好直接在Component上设置模型。你可以通过调用
来做到这一点this.getOwnerComponent().setModel(...);
在任何控制器内部。或者直接在Component.js like in the Wordlist tutorial上进行。您可以稍后将数据传播到该模型,即稍后在控制器内传播。