UI5-MobX
Use the powerful concepts of MobX to manage state in UI5.
ui5-mobx
provides a special sap.ui.model.Model
implementation
and reactive bindings (PropertyBinding, ListBinding, ContextBinding)
which support one-way and two-way data binding.
In contrast to other model implementations, the provided MobxModel
focuses on state management and change propagation only. It intentionally doesn't
handle webservice requests. Single responsibility!
The Gist
- Externalize your state as Mobx observable
- Init
MobxModel
with state and bind to view - Only interact with externalized state from here on
import { MobxModel } from "ui5-mobx";
import { makeAutoObservable } from "mobx";
export default class MobxMainController extends BaseController {
// 1. here we create our state and make it observable
private state = makeAutoObservable({
searchForm: {firstName: "", lastName: ""},
people: []
});
onInit() {
// 2. initialize the MobxModel with our state and pass it to the view
const model = new MobxModel(this.state);
this.getView().setModel(model);
}
onEvent() {
// 3. directly retrieve your state preserving all of it types
const { searchForm, people } = this.state;
...
// 4. manipulate state => it will result in a view change
people.push({firstName: "Heinz", lastName: "Tester"});
}
}
Installation
Mobx itself is only a peer-dependency for ui5-mobx
, so it must be installed additionally:
npm install --save mobx ui5-mobx
Documentation
You're reading it.
Examples
See odata2ts Playground for ui5-mobx in action
and in combination with odata2ts
.
Origins
The origins of this approach date back to early 2017 or, more specifically, this Sap Blog article: Reactive State Management in SAPUI5 via MobX.
Support, Feedback, Contributing
This project is open to feature requests, suggestions, bug reports, usage questions etc. via GitHub issues.
Contributions and feedback are encouraged and always welcome.
See the contribution guidelines for further information.
License
MIT