现在我们已经设置了视图和控制器，现在是时候考虑MVC中的M了。

我们将在app中添加一个输入字段，将它的值绑定到模型上，并将相同的值绑定到输入字段的描述上。描述将根据用户类型直接更新。

Preview

An input field and a description displaying the value of the input field

Coding

You can view and download all files at Walkthrough - Step 7.

webapp/controller/App.controller.js

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");

      }

   });

});

我们向控制器添加一个init函数。onInit是SAPUI5的生命周期方法之一，在创建控制器时由框架调用，类似于控件的构造函数。

在函数内部，我们实例化JSON模型。模型的数据只包含“收件人”的一个属性，其中还包含名称的另一个属性。

为了能够在XML视图中使用这个模型，我们在视图上调用setModel函数并传递我们新创建的模型。模型现在被设置在视图上。

消息toast只是显示了静态的“Hello World”消息。我们将在下一个步骤中展示如何加载翻译后的文本。

webapp/view/App.view.xml

<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

<!DOCTYPE html>

<html>

   <head>

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <meta charset="utf-8">

      <title>Walkthrough</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.walkthrough": "./"

        }' >

      </script>

      <script>

         sap.ui.getCore().attachInit(function () {

                       sap.ui.xmlview({

                               viewName: "sap.ui.demo.walkthrough.view.App"

                       }).placeAt("content");

         });

      </script>

   </head>

   <body class="sapUiBody" id="content">

   </body>

</html>

　　请注意：可以在脚本中使用data-sap-ui- compatversion ="edge"，也可以使用data-sap-ui- bindingsyntax ="complex"。通过设置“edge”兼容模式，可以自动启用复杂的绑定语法。edge模式自动启用兼容性特性，否则必须手动启用这些特性。有关更多信息，请参见兼容性版本信息Compatibility Version Information.。value属性的绑定是一个简单的绑定示例，它只包含一个绑定模式。我们还可以将文本和绑定模式组合成更复杂的绑定结果，如description属性所示。为了能够使用所谓的复杂绑定语法，我们必须通过将引导参数data-sap-ui- compatversion设置为edge全局启用它。如果省略此设置，则只允许标准绑定语法，即“Hello {/ receiver /name}”将不再工作，而“{/ receiver /name}”将正常工作。

Conventions

　　• 变量名使用匈牙利符号。

Parent topic: Walkthrough

Previous: Step 6: Modules

Next: Step 8: Translatable Texts

Related Information

Model View Controller (MVC)

Data Binding

JSON Model

API Reference:sap.ui.define

UI5-文档-4.7-JSON Model的更多相关文章

  1. 文档模型（JSON）使用介绍

    一.背景 E.F.Codd在1970年首次提出了数据库系统的关系模型,从此开创了数据库关系方法和关系数据理论的研究,为数据库技术奠定了理论基础,数据库技术也开始蓬勃发展.而随着几大数据库厂商陆续发布的 ...

  2. java将XML文档转换成json格式数据

    功能 将xml文档转换成json格式数据 说明 依赖包:1. jdom-2.0.2.jar : xml解析工具包;2. fastjson-1.1.36.jar : 阿里巴巴研发的高性能json工具包 ...

  3. JAVA读取XML，JAVA读取XML文档，JAVA解析XML文档，JAVA与XML，XML文档解析(Document Object Model, DOM)

    使用Document Object Model, DOM解析XML文档 也可参考我的新浪博客:http://blog.sina.com.cn/s/blog_43ac5543010190w3.html ...

  4. QJsonDocument实现Qt下JSON文档读写

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QJsonDocument实现Qt下JSON文档读写     本文地址:http://tech ...

  5. [Xcode 实际操作]七、文件与数据-(17)解析JSON文档

    目录:[Swift]Xcode实际操作 本文将演示如何解析JSON文档. 项目中已添加一份JSON文档:menu.json { "menu": { "id": ...

  6. Django Rest framework Swagger生成api文档

    关于swagger Swagger能成为最受欢迎的REST APIs文档生成工具之一,有以下几个原因: - Swagger 可以生成一个具有互动性的API控制台,开发者可以用来快速学习和尝试API. ...

  7. Elasticsearch 关键字：索引，类型，字段，索引状态，mapping，文档

    1. 索引(_index)索引:说的就是数据库的名字.我这个说法是对应到咱经常使用的数据库. 结合es的插件 head 来看. 可以看到,我这个地方,就有这么几个索引,索引就是数据库,后面是这个数据库 ...

  8. rest api方式实现对文档库的管理

    写在前面 刚入职一家新公司,在对接app的时候需要获取到某公司的sharepoint上面的文档库,获取文档库列表,团队文档库中的文件和文件夹列表,个人文档库中的文件文件夹列表,及在app端进入文件夹的 ...

  9. Django Rest Swagger生成api文档

    关于swagger Swagger能成为最受欢迎的REST APIs文档生成工具之一,有以下几个原因: Swagger 可以生成一个具有互动性的API控制台,开发者可以用来快速学习和尝试API. Sw ...

  10. DOM文档对象总结

    DOM总结: DOM:文档对象模型document object model DOM三层模型: DOM1:将HTML文档封装成对象 DOM2:将XML文档封装成对象 DOM3:将XML文档封装成对象 ...

随机推荐

  1. PHP mongodb 的使用

    mongodb 不用过多的介绍了,NOSQL的一种,是一个面向文档的数据库,以其方便灵活的数据结构,对于开发者来说是比较友好的,同时查询的速度也是比较快的,现在好多网站 开始使用mongodb ,具体 ...

  2. python安装途中遇到的问题和解决方法

    一.setuptools安装错误:RuntimeError: Compression requires the (missing) zlib module 1. 描述 搞了个腾讯云的服务器,闲在手上没 ...

  3. JAVA关闭钩子

    JAVA的关闭钩子: 1. 一般应用程序在关闭时都需要做一些善后清理工作,但是用户并不会总是按照推荐的方法关闭应用程序,比如用户直接关闭控制台程序或者按下Ctrl+C结束应用程序,这样就导致清理工作得 ...

  4. RAC3——RAC原理开始

    1.RAC并发 RAC的本质是一个数据库,只不过现在这个数据库运行在了多台计算机上,在原先的单实例中,一个进程是否可以修改一条数据,取决于是否有其他进程(同一台计算机上)并发修改.在RAC环境下,这种 ...

  5. 如何在MFC DLL中向C#类发送消息

    如何在MFC DLL中向C#类发送消息 一. 引言 由于Windows Message才是Windows平台的通用数据流通格式,故在跨语言传输数据时,Message是一个不错的选择,本文档将描述如何在 ...

  6. Rockchip parameter文件详解

    瑞芯微的安卓平台使用 parameter 文件来配置一些系统参数,比如定义串口号,固件版本,flash分区信息等. parameter 文件是由 BootLoader 解析的,大小不能超过 64 KB ...

  7. OpenWrt的web服务器

    参考: http://www.szchehang.com/news/10602.html 我们登录的路由器主界面就是通过这个软件指定了80端口来访问的.我们要添加自己额外的网站服务,那只需要重新定义一 ...

  8. 如何使用swingbench进行oracle数据库压力测试

    如何使用swingbench进行oracle数据库压力测试 2014-10-06 08:09:02 标签:oracle 数据库压力测试 swingbench 原创作品,允许转载,转载时请务必以超链接形 ...

  9. [记录]js跨域调用mvc ActionResult扩展

    背景 最近2个项目中都用到了js跨域访问的知识,2个项目都需要主站与各个分站之间进行数据交互.状态同步等相关操作.浏览器本身是不允许进行跨域访问,在MVC中我们可以扩展一个方法来实现这个功能.在此大家 ...

  10. Android Drawable Mipmap Vector使用及Vector兼容

    原文地址:http://blog.csdn.net/eclipsexys/article/details/51838119 http://blog.csdn.net/qq_15545283/artic ...