(九) 两个Model之JSONModel

时间 2021-07-11 标签 fiori sapui5

在fiori开发中，涉及到两种model，JSONModel和ODataModel，初学时比较难理解。之前的文章对JSONModel的对象数据绑定做过介绍，现在来说说比较常用的列表绑定。

JSONModel用进行页面与controller之间的数据传递，JSONModel可以是单向数据绑定也可以是双向数据绑定，所以技能把controller中的数据绑定到页面上，也可以从controller中通过JSONModel中得到页面数据。由于双向数据绑定的做法代码可读性差一些，所以个人一般只用于绑定controller数据到页面。下面来看下JSONModel是如何使用的。JSONModel打字时需要不停的切换输入法，以下出现的model都指的是JSONModel代替了。

如图1，15行声明了一个叫tableModel的model。
16行代码虽短，但是做了却做了三件事。this.getView()，获取到当前的view。setModel()，将tableModel重命名为tModel并绑定到view上。很多情况下，不进行重命名也是没有问题的，但一个页面只有一个model的情况并不多，多个model是不重命名就显得很乱。养成好的编程习惯很重要。
接下来调用getTableData方法获取数据。在该方法中，先获取mock data（如图2），然后setModel方法中调用了model的setData方法将data 配置给model。这样页面和数据就通过model联系到了一起。因为一个页面上可能会有多个model，所以将setData提炼成公用的方法，清晰明了。

在练习的时候可以直接把假数据写在controller中，只是看起来比较丑而已。

好了，数据有了，model也有了，view也有了，现在来看下数据是如何绑定到view上去的。如图3。

在粗粗的红线上方我们能看到，Table控件有items属性，并将路径配置到了tModel，这句的意思是要在tModel下进行循环。
下方的红框中，是table的表头，列出了每列的内容，往了就翻看前边的文章，有比较详细的多语言用法。
蓝色的框框是重点，必考题，这就是循环体了，table的每一行都由这个循环而来。绿色部分只是个icon，并没有关联数据，是可以删掉的。剩下的五行代码，每行都有tModel。没错，这里的每行代码都从tModel中取出一个或者两个属性，显示table的每一列中。例如，<ObjectIdentifier title="{tModel>name}"/>就表示将tModel中当次循环的name属性赋值给ObjectIdentifier控件的title属性，用于显示当前table行的值。

下面看下运行效果吧。