1.练习效果
2.源码
您可以在演练-步骤7中查看和下载所有文件。
前面说了MVC中的VIEW,controller,这里开始说MVC中的M.
下面将向应用程序添加一个输入框字段，将其值绑定到模型M中，并将相同的值绑定到输入字段的描述。用户类型将直接更新描述。
webapp / controller / App.controller.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast", "sap/ui/model/json/JSONModel" ], function (Controller, MessageToast, JSONModel) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.App", { onInit : function () { // set data model on view var oData = { recipient : { name : "World" } }; var oModel = new JSONModel(oData); this.getView().setModel(oModel); }, onShowHello : function () { MessageToast.show("Hello World"); } }); }); |
我们向控制器添加一个初始化函数。 onInit是SAPUI5启动事件，在创建控制器创建时由框架调用，类似于控件的构造函数。
在函数内部，我们实例化了一个JSON模型。模型的数据仅包含“收件人(recipient)”的单个属性，并且在其中还包含一个属性：名称(name)。
为了能够在XML视图中使用此DATA模型，我们将 setModel在视图上运行并传递我们新创建的模型。现在在视图上设置了模型。
消息事件只是显示静态文本“ Hello World”消息。在下一步中，我们将展示如何加载翻译后各种语言的文本。
webapp/view/App.view.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Button text="Say Hello" press=".onShowHello"/> <Input value="{/recipient/name}" description="Hello {/recipient/name}" valueLiveUpdate="true" width="60%"/> </mvc:View> |
我们添加一个 sap.m.input控件到视图中。这样，用户可以输入问候语的收件人。通过使用XML视图的声明性绑定语法，将其值绑定到 SAPUI5模型：
- 大括号 {…} 表示数据取自 收件人RECIPIENT的对象名称name属性。此操作称为“数据绑定”。
- /收件人/姓名 在模型中声明路径。
webapp / index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SAPUI5 Walkthrough</title> <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/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-async="true" data-sap-ui-resourceroots='{ "sap.ui.demo.walkthrough": "./" }' data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index"> </script> <script src="index.js"></script> </head> <body class="sapUiBody" id="content"> </body> </html> |
value属性的绑定是一个仅包含绑定模式的简单绑定示例。我们还可以将文本和绑定模式组合为更复杂的绑定结果，如description属性所示。为了能够使用所谓的复杂绑定语法，我们必须通过设置bootstrap参数来全局启用它data-sap-ui-compatVersion 给edge。如果省略此设置，则仅允许使用标准绑定语法，即“ “Hello {/recipient/name}“将不可使用，只能使用 “{/recipient/name}“这样的语法。
3.注意
我们可以使用 data-sap-ui-compatVersion =“ edge” 或者 data-sap-ui-bindingSyntax =“ complex”在脚本中。通过设置“edge”兼容模式，将自动启用复杂的绑定语法。的edge模式会自动启用兼容性功能，否则必须手动启用。有关更多信息，请参见兼容性版本信息。
4.约定
- 对变量名｛｝符号。