Create a Model:
一个model中的业务数据可以由不同的格式来定义：
还有一种特殊的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
...
<script>
// Attach an anonymous function to the SAPUI5 'init' event
sap.ui.getCore().attachInit(function () {
// Create a JSON model from an object literal
var oModel = new sap.ui.model.json.JSONModel({
greetingText: "Hi, my name is Harry Hawk"
});
// Assign the model object to the SAPUI5 core
sap.ui.getCore().setModel(oModel);
// Display a text element whose text is derived
// from the model object
new sap.m.Text({ text : "{/greetingText}" }).
placeAt("content");
});
</script>
...
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)
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Panel headerText="{/panelHeaderText}" class="sapUiResponsiveMargin" width="auto">
<content>
<Label text="First Name" class="sapUiSmallMargin" />
<Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
<Label text="Last Name" class="sapUiSmallMargin" />
<Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
<CheckBox selected="{/enabled}" text="Enabled" />
</content>
</Panel></mvc:View>
这里创建了一个新的view目录，和一个新的XML view。
webapp/index.html
<!DOCTYPE html><html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>SAPUI5 Data Binding Tutorial</title>
<script
id="sap-ui-bootstrap"
src="../../../../../../../../../resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{ "sap.ui.demo.db": "./" }'
>
</script>
<script>
// Attach an anonymous function to the SAPUI5 'init' event
sap.ui.getCore().attachInit(function () {
// Create a JSON model from an object literal
var oModel = new sap.ui.model.json.JSONModel({
firstName: "Harry",
lastName: "Hawk",
enabled: true,
panelHeaderText: "Data Binding Basics"
});
// Assign the model object to the SAPUI5 core
sap.ui.getCore().setModel(oModel);
// Display the XML view called "App"
new sap.ui.core.mvc.XMLView({ viewName : "sap.ui.demo.db.view.App" })
.placeAt("content");
});
</script></head><body class="sapUiBody" id="content"></body></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
...
<script>
var oModel = new sap.ui.model.json.JSONModel({
firstName : "Harry",
lastName : "Hawk",
enabled : true,
panelHeaderText : "Data Binding Basics"
});
oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
// Assign the model object to the SAPUI5 core
sap.ui.getCore().setModel(oModel);
...
加入如上语句，改变绑定模式为one-way。
修改后， 不管checkbox的状态如何，input框保持可以输入。
单向绑定（one-way binding）保证了数据永远只从model传向UI。
绑定模式（单向/双向）是设置在model对象上的。所以，除非你显式的改变它，一个新的binding instance就会使用默认模式。
要改变binding mode， 有两种方式：
- 改变model的默认binding mode。就像上面例子里做的那样。
- 为一个binding instance指定一个binding mode，使用参数 oBindingInfo.mode。这样的话，只改变某个特定binding instance的mode。其它的
binding instances 仍旧使用默认mode。参考 API Reference: sap.ui.base.ManagedObject.bindProperty
.
Note
关于改变binding mode要注意的两点: - 如果改变了一个model的默认binding mode (像例子中的做法), 那么除非你在显式地修改回来，所有之后的binding instances会使用修改过的binding mode.
- 修改一个model的默认binding mode，对于已经生成的binding instance不会起效。
网友评论