UI5 Data Model

Create a Model:

一个model中的业务数据可以由不同的格式来定义：

• JavaScript Object Notation (JSON)
• Extensible Markup Language (XML)
• OData
• Your own custom format
  

还有一种特殊的model类型叫做 "resource model". This model type is used as a wrapper object around a resource bundle file. 文件名以.properties 结尾，通常用在存放多语言相关的text.

当创建JSON, XML以及resource model这些类型的model时，它们包含的内容是一次性载入的（local file或者request web server）。换句话说，在请求完这些类型的model的数据之后，整个model对于application都是可见状态了。
这些Model类型被称为client-side models，类似于filtering和sorting之类的任务都在client本地执行。

对比OData model类型，是另外一种server-side models。意味着不管何时application需要从model取得数据，必须从server端去request。基本每次request不会返回全部的数据，因为数据量一般比较庞大。因此，类似sorting和filtering的任务每次都会分配到server端。

Creat Property Binding:

Preview

image.png

Figure : Screen with text derived from various sources (No visual changes to last step)

Coding
webapp/index.html

...
 
...

sap.m.Text control的 text property设值为 {/greetingText}. 大括号括起来的binding path会被自动识别为是binding。这些binding称为PropertyBindings 。在这个例子里，控件的text property被绑定到位于default model的root路径的 greetingText 。binding路径开头的斜杠 (/) 表示是绝对绑定路径。

Two-Way Data Binding:

Preview

Figure: Input fields can be enabled or disabled

Coding
webapp/view/App.view.xml (New)

这里创建了一个新的view目录，和一个新的XML view。

webapp/index.html

• 在bootstrap里增加data-sap-ui-resourcerouts 参数。
• 删掉了上一步的sap.m.Text控件，用新建的XML view（用它的resource name调用）取而代之。
• 刷新页面之后，尝试选择和取消checkbox，可以观察到input框会根据checkbox的状态自动enable和disable

image.png

image.png

虽然我们没有写任何代码在UI和model之间传值，但是Input控件的状态可以随着checkbox的状态变化。SAPUI5的model实现了双向数据绑定（two-way data binding ）。对于JSON类型的model来说，默认的设置就是two-way binding。

注意两点:

• 数据绑定使得控件的property可以从一个model中获得任何一个合适的property的值。
• SAPUI5会自动处理从model到控件的数据传输，以及从控件到model的传值。这种方式叫做two-way binding.

One-Way Data Binding:

Preview

Figure: Two-way data binding disabled for the checkbox

Coding
webapp/index.html

...