当前位置: 首页 > news >正文

SAPUI5基础知识9 - JSON Module与数据绑定

1. 背景

在前面的博客中,我们已经学习了SAPUI5中视图和控制器的使用,在本篇博客中,让我们学习下MVC架构中的M-模型了。

SAPUI5中的JSON Model是一个客户端模型,可以用于在SAPUI5应用程序中处理和操作JSON数据。SAPUI5提供了绑定控件数据到JSON对象的机制,使得当JSON数据改变时,UI控件也会自动更新。

2. 示例

使用SAPUI5的JSON Model通常包括以下步骤:

  1. 创建JSON Model实例
  2. 加载或设置JSON数据到模型中
  3. 将模型绑定到视图或控件

以下是一个简单的示例:

// 创建一个JSON Model实例
var oModel = new sap.ui.model.json.JSONModel();// 设置JSON数据到模型中
var oData = {"employees": [{ "firstName": "John", "lastName": "Doe" },{ "firstName": "Anna", "lastName": "Smith" },{ "firstName": "Peter", "lastName": "Jones" }]
};
oModel.setData(oData);// 将模型绑定到视图
this.getView().setModel(oModel);

在视图文件中,使用以下方式绑定数据到控件:

<List items="{/employees}"><items><ObjectListItem title="{firstName}" intro="{lastName}" /></items>
</List>

在上述示例中,我们首先创建了一个JSON Model实例,然后设置了一些JSON数据到模型中。然后,我们将模型绑定到视图。在视图中,我们使用绑定语法将数据绑定到一个列表控件。当JSON数据改变时,列表控件会自动更新。

3. 练习

在上一篇博客练习的基础上,让我们在应用程序中添加一个新的输入字段,并将其值绑定到模型,并将相同的值绑定到输入字段的描述中。当用户输入时,字段的描述将直接自动更新。

3.1 添加JSON Model

首先,让我们在App.controller.js文件中添加JSONModel资源的引用。

通过SAPUI5的生命周期方法onInit函数 ,实例化JSON模型。onInit函数会在控制器创建时被框架调用,类似于控件的构造函数。

模型数据仅包含“recipient”属性,recipliet内部包含一个额外的name名称属性。

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

改动后的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("zsapui5.test.controller.App", {onInit: function () {//set data model on viewconst oData = {recipient: {name: "World"}};const oModel = new JSONModel(oData);this.getView().setModel(oModel);},onShowHello: function () {MessageToast.show("Hello World");}});
});

3.2 添加输入框

接下来,让我们在视图文件App.view.xml中添加了一个 sap/m/Input 控件,通过这个控件,用户可以输入信息。

通过使用 XML 视图的声明性绑定语法,将控件上的值绑定到 SAPUI5 模型上:

  • 花括号{…}表示数据取自接收者对象的名称属性的值,这就是SAPUI5中的“数据绑定”。

  • /recipient/name 声明了模型中的路径。

<mvc:ViewcontrollerName="zsapui5.test.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>

3.3 运行

增强后的程序运行效果如下:

初始界面,输入框的值为World,输入框的描述为Hello World;

当用户删除输入框的值时,输入框的描述会自动更新;

当用户在输入框键入Buddy是,输入框的描述更新为Hello Buddy;
在这里插入图片描述

4. 小结

本文介绍了SAPUI5中JSON模型和数据绑定的原理,并通过一个示例展示了其用法。

相关文章:

SAPUI5基础知识9 - JSON Module与数据绑定

1. 背景 在前面的博客中&#xff0c;我们已经学习了SAPUI5中视图和控制器的使用&#xff0c;在本篇博客中&#xff0c;让我们学习下MVC架构中的M-模型了。 SAPUI5中的JSON Model是一个客户端模型&#xff0c;可以用于在SAPUI5应用程序中处理和操作JSON数据。SAPUI5提供了绑定…...

解决vue3使用ref 获取不到子组件属性问题

需求&#xff1a; 父子组件使用<script setup>语法糖&#xff0c;父组件通过给子组件定义ref访问子组件内部属性或事件。 关键点&#xff1a; 子组件中&#xff0c;setup语法糖需要用defineExpose把要读取的属性和方法单独暴露出去&#xff0c;否则会访问失败&#xf…...

使用STL容器还是Qt容器?

在C编程中&#xff0c;选择合适的容器库对于编写高效、可维护的代码至关重要。两大主流选择是STL容器&#xff08;如std::map&#xff0c;std::vector等&#xff09;和Qt容器&#xff08;如QMap&#xff0c;QVector等&#xff09;。本文将探讨两者的优缺点&#xff0c;以帮助开…...

Android 2ndBLE的实现

没有需求创造需求 有没有想过一件事情&#xff0c;假如你的手机关机了&#xff0c;而且在家里怎么都找不到的情况&#xff1f; 那么通过另外一种手机进行查找是不是可以&#xff1f;听上去有点搞笑&#xff0c;但实际上确实有这样的需求存在。实现方案是用超低功耗蓝牙&#…...

常见硬件工程师面试题(二)

大家好&#xff0c;我是山羊君Goat。 对于硬件工程师&#xff0c;学习的东西主要和电路硬件相关&#xff0c;所以在硬件工程师的面试中&#xff0c;对于经验是十分看重的&#xff0c;像PCB设计&#xff0c;电路设计原理&#xff0c;模拟电路&#xff0c;数字电路等等相关的知识…...

java构造方法的重载

在java中&#xff0c;与普通方法一样&#xff0c;构造方法也可以重载&#xff0c;在一个类中可以定义多个构造方法&#xff0c;但是要求每个构造方法的参数类型或参数不同。在创建对象时&#xff0c;可以通过调用不同的构造方法为不同属性赋值。 示例代码如下 class Student5…...

webpack 压缩图片

压缩前&#xff1a; 压缩后&#xff1a; 压缩后基本上是压缩了70-80%左右 1.依赖版本及配置 "imagemin-webpack-plugin": "^2.4.2", "imagemin-mozjpeg": "^7.0.0", "imagemin-pngquant": "^5.0.1", "webpa…...

JAVA每日作业day6.24

ok了家人们今天学习了一些关键字&#xff0c;用法和注意事项&#xff0c;静态代码块这些知识&#xff0c;闲话少叙我们一起看看吧。 一&#xff0c;final关键字 1.1 final关键字的概述 final&#xff1a; 不可改变。可以用于修饰类、方法和变量。 类&#xff1a;被修饰的类&a…...

鸿蒙开发系统基础能力:【@ohos.hiTraceChain (分布式跟踪)】

分布式跟踪 本模块提供了端侧业务流程调用链跟踪的打点能力&#xff0c;包括业务流程跟踪的启动、结束、信息埋点等能力。 说明&#xff1a; 本模块首批接口从API version 8开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import hi…...

.git目录解读

在执行 git init 命令时&#xff0c;Git 会在当前目录中创建一个名为 .git 的目录。该目录包含 Git 所需的所有元数据和对象&#xff0c;用于版本控制。以下是 .git 目录结构的示意图&#xff0c;并附有每个目录和文件的作用说明&#xff1a; .git #…...

如何在Java中处理InterruptedException异常?

如何在Java中处理InterruptedException异常&#xff1f; 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java编程中&#xff0c;多线程是一个常见的应用场景…...

深入解读Netty中的NIO:原理、架构与实现详解

深入解读Netty中的NIO&#xff1a;原理、架构与实现详解 Netty是一个基于Java的异步事件驱动网络应用框架&#xff0c;广泛用于构建高性能、高可扩展性的网络服务器和客户端&#xff08;学习netty请参考&#xff1a;深入浅出Netty&#xff1a;高性能网络应用框架的原理与实践&…...

Vim和Nano简介

**Vim**&#xff1a; - Vim 是一个文本编辑器&#xff0c;它是 Vi 编辑器的一个改进版本&#xff0c;Vi 编辑器最初由 Bill Joy 在1976年为 BSD Unix 开发。 - Vim 由 Bram Moolenaar 开发&#xff0c;其第一个版本在1991年发布。Vim 的设计理念是“持继改进”&#xff0c;它的…...

mysql的information_schema浅析

information_schema 是 MySQL 中的一个虚拟数据库&#xff0c;它包含了关于 MySQL 服务器的所有元数据。 information_schema 作用 元数据管理&#xff1a;提供关于数据库、表、列、索引、权限等的信息。 性能优化&#xff1a;帮助了解数据库结构和索引使用情况&#xff0c;便…...

力扣爆刷第153天之TOP100五连刷26-30(接雨水、环形链表、最长上升子序列)

力扣爆刷第153天之TOP100五连刷26-30&#xff08;接雨水、环形链表、最长上升子序列&#xff09; 文章目录 力扣爆刷第153天之TOP100五连刷26-30&#xff08;接雨水、环形链表、最长上升子序列&#xff09;一、300. 最长递增子序列二、415. 字符串相加三、143. 重排链表四、42.…...

【Linux】—Apache Hive 安装部署

文章目录 前言认识Metadata认识Metastoremetastore三种配置方式 一、安装前准备二、下载hive-3.1.2安装包三、下载完成后&#xff0c;通过xftp6上传到Linux服务器上四、解压Hive安装包五、配置Hive六、内嵌模型安装—Hive元数据配置到Derby七、本地模式安装—Hive元数据配置到M…...

组装盒示范程序

代码; #include <gtk-2.0/gtk/gtk.h> #include <glib-2.0/glib.h> #include <stdio.h>int main(int argc, char *argv[]) {gtk_init(&argc, &argv);GtkWidget *window;window gtk_window_new(GTK_WINDOW_TOPLEVEL);gtk_window_set_title(GTK_WINDO…...

推荐一款AI修图工具,支持AI去水印,AI重绘,AI抠图...

不知道大家有没有这样的一个痛点&#xff0c;发现了一张不错的“素材”&#xff0c; 但是有水印&#xff0c;因此不能采用&#xff0c;但找来找去&#xff0c;还是觉得初见的那个素材不错&#xff0c;怎么办&#xff1f; 自己先办法呗。 二师兄发现了一款功能强大的AI修图工具…...

2024广东省职业技能大赛云计算赛项实战——容器化部署Nginx

容器化部署Nginx 前言 编写Dockerfile文件构建nginx镜像&#xff0c;要求基于centos完成Nginx服务的安装和配置&#xff0c;并设置服务开机自启。 编写Dockerfile构建镜像erp-nginx:v1.0&#xff0c;要求使用centos7.9.2009镜像作为基础镜像&#xff0c;完成Nginx服务的安装&…...

压缩pdf文件大小在线,在线免费压缩pdf

在现在办公中&#xff0c;PDF文档已经成为我们日常工作中不可或缺的一部分。然而&#xff0c;随着文档内容的不断丰富&#xff0c;PDF文件的大小也逐渐增大&#xff0c;这不仅占用了大量的存储空间&#xff0c;而且在传输和共享时也显得尤为不便。所以有时候我们需要把pdf压缩小…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...