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=预览

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

我们的状态是什么？在其纯形式中，应用程序的状态只包括：