欢迎浏览sook云!

网站地图

当前位置:主页 > 大宽带 > 项目 >

域名备案_创意网站建设_免费申请

时间:2022-01-14 17:18

人气:

作者:sook云

导读:2月2日更新,2017年:还可以查看@Christoph Kraemer的博客文章,该文章介绍了ReduxModel作为一种替代方案(关于我自己使用Redux和MobX的经验,请参阅我在底部的评论) 简短摘要 这篇博客文...

域名备案_创意网站建设_免费申请

2月2日更新,2017年:还可以查看@Christoph Kraemer的博客文章,该文章介绍了ReduxModel作为一种替代方案(关于我自己使用Redux和MobX的经验,请参阅我在底部的评论)

简短摘要

这篇博客文章是关于使用状态管理库MobX和UI5来管理复杂UI5应用程序中的状态(作为UI5的替代方案)JSONModel)。这种方法的好处是更好地分离UI和业务逻辑,更容易测试代码,最终减少bug的数量,在某些情况下甚至可以提高应用程序的性能,您会很高兴听到MobX是一个库,它应用了这种风格,并为UI5带来了反应性。然而,与其他反应式编程库(例如RxJS)相比,它隐藏了许多复杂性,因此更容易学习并集成到现有的项目、团队或框架(如UI5)中。

事实上,因为mobx非常容易学习和推理,我不必在我的博客文章中谈论太多理论和反应式编程概念,但请举例说明好处。

为了让ui5和mobx无缝地协同工作,我们将使用https://github.com/geekflyer/mobx-ui5

该方法已成功应用于SAP产品预测性维护与服务中的ui组件:https://eaexplorer.hana.ondemand.com//\u item.html?id=11527#!/概述

简介

在下面的几节中,我将通过越来越复杂的示例来说明在UI5应用程序中使用MobX的动机。如果您只是对MobX的使用感兴趣(不阅读"1。动机和限制……)您可以直接进入第2节:"使用MobX进行状态管理"。

1。ui5jsonmodel的动机和局限性

作为一名经验丰富的UI5开发人员,您将知道将大部分状态放入模型(例如JSONModel、ODataModel)并将控件(例如sap.m.Text)绑定到该模型中的某些in路径是一种很好的做法。每当用户执行您在事件处理程序中更新的操作(如单击按钮)时,模型和相关控件的状态将自动更新/重新呈现。(不鼓励的坏做法)替代方法是不更新模型,而是获取对要更新的控件的引用我是拜伊德(controlId)并直接设置控件属性(例如。我的文本.setText('newtext')

让我们看一个使用JSONModel的最佳实践的简单示例,有一个按钮和一个文本,一旦用户点击按钮就应该更改。

为了创建一个综合性的示例,我只使用片段和应用程序.js在片段上使用伪控制器而不是视图和实际控制器:

app.fragment.xml文件:

应用程序.js:

您可以看到运行示例此处:https://plnkr.co/edit/Hs2pd5B6hbrDxTyJ9jDe?p=preview

现在发生的事情非常简单–一旦用户按下按钮,onButtonPress事件处理程序就会被调用,然后通过model.setProperty属性('/text',changed text');因此textfields的文本被更改为changed text.

到目前为止很简单。

然而,有些人可能会想,为什么不能直接更改state对象上的文本呢。通过状态.text='更改的文本'?那不是更简单更优雅吗?问题是,如果您这样做,JSONModel将不会收到此更改的通知,因此textfield将不会得到更新。

但是在最近的UI5版本中,JSONModel引入了一个称为观察模式的新特性。为了激活它,必须将true作为第二个参数传递给JSONModel构造函数。启用观察模式后,可以直接在state对象上设置属性,并且模型仍会收到通知。它的工作方式是将state对象属性转换为ES5 getter和setter,然后连接到setter函数(这也是MobX使用的原语之一)。但是你不一定要理解这个魔术才能使用它。

现在让我们使用例子中的观察模式:

应用程序.js

运行代码:https://plnkr.co/edit/XZTjbM?p=预览

这已经有点简单和优雅了。不幸的是,JSONModel中的观察模式有一些限制,最明显的是,当您有一个数组并向其中添加新项时,它不会通知模型。我得打电话通知模特模型.刷新()添加新项目后。

在展示了一些非常简单的JSONModel现状示例之后,让我们做一个更具挑战性的示例。

任务如下:

我们需要一个显示(简化)订单列表的应用程序。每个订单由一个id、产品名称和数量组成。

例如:`{id:5,产品名称:'熊胶',数量:15}`

–应用程序应提供添加新订单、删除上一个订单和编辑任何订单(更改产品或数量)的功能。

到目前为止还不是很有挑战性。但是,云 服务器,让我们添加一些特殊要求:

–我们希望显示订单总数–我们要显示项目总数(订单x数量)–我们要显示按产品分组的数量摘要。因此,对于每种产品,我们希望看到过去总共订购了多少实例。例如,大数据的商业价值,如果我有3个软糖熊订单,每个订单的数量为15个,那么摘要应该显示总共45个软糖熊。–当我对订单列表进行任何更改操作(添加、删除、编辑)时,应立即更新所有总计和摘要。

最终申请(是的,我不会因此获得设计奖;-))应该是这样:

在红色中,你可以看到包含总计和摘要的部分,以及具有挑战性的要求。

你可以在这里看到最终的代码和正在运行的应用程序:https://plnkr.co/edit/cqLRN8?p=预览

让我们稍微分析一下我们的需求

我们的状态是什么?在其纯形式中,应用程序的状态只包括:

温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!
相关阅读
本类排行
相关标签
本类推荐

关于我们 | 版权声明 | 广告服务 | 友情链接 | 联系我们 | 网站地图

Copyright © 2002-2020 sook云 版权所有 备案号:豫ICP备36548666号
本站资料均来源互联网收集整理,作品版权归作者所有,如果侵犯了您的版权,请跟我们联系。