Marko (v3) Real State
This module lets you to create components with "real states" that persist during parent's re-renders
Why
Marko 3 has an unusual way to dal with states. When a parent re-render the getInitialState
function of the child component is called in the children and they lose their state.
This let you persist the state across re-renders.
Installation
npm install marko-real-state
Or
yarn add marko-real-state
Use
const realState = require('../../lib');
// Notice the `defineComponent(` *`realState`* `({`
module.exports = require('marko-widgets').defineComponent(realState({
// This is called only once and it will
// override variables declared in getInitialState
// What this function returns will persist when
// the parent state is updated and the component has to re-render
// You can keep using this.setState as usual to update the state
getInitialRealState: function(input) {
var value = input.value || 0;
return {
value: value
};
},
...
Sample app
Download it:
git clone https://github.com/ccinelli/marko-real-state.git
cd marko-real-state
# Run with this: [or browser-refresh server.js]
node server.js
The app will start with all counters at 0:
Increment the 2 children
Increment the parent
The child with realState maintains its state
TODO
- Tests