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

...
 <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不会起效。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容