nb-immutable-model
v0.8.2
Published
An ES6 class as a base to create immutable model with change detection
Downloads
39
Readme
nb-immutable-model v0.6.1
This is an ES6+ class for extending a model. Internally using Immutable data structure.
For non ES6 user. Please note the class name is NbImmutableModel
(export module name).
The main interface is the setter $data
and the getter $data
.
Dependencies
This class required 3 Dependencies.
- lodash
- immutable
- immutablediff
Example
// create a new class that extends the Model
import NbImmutableModel from 'nb-immutable-model';
export default class Test extends NbImmutableModel {
constructor()
{
super();
this.data = {id: 1 , count: 1};
this.$data = this.data;
}
fetch()
{
return this.$data;
}
add()
{
this.$data = {count: this.data.count++};
}
}
Now when you use it.
const testInstance = new Test();
console.log('first' , testInstance.fetch());
console.log('second' , testInstance.add());
console.log('third' , testInstance.fetch());
API DOC
$data (setter)
Pass your data object and store in a Immutable data structure
const model = new NbImmutableModel();
model.$data = {name: 'John Doe' , id: 1};
$data (getter)
Get your data back. Note this will convert the Immutable with toJS()
method
const model = new NbImmutableModel();
model.$data = {name: 'Jane Doe' , id: 2};
// getter
const person = model.$data;
// console.log(person) ==> {name: 'Jane Doe' , id: 2}
model.$data = {pet: 'Bob'};
const personWithPet = model.$data;
// console.log(personWithPet) ==> {name: 'Jane Doe' , id: 2 , pet: 'Bob'}
$raw (getter)
This will return the current Immutable
model.
$diff (getter)
This will return the data holds in the current immutable model as well as the diff compare to the last save.
const model = new NbImmutableModel();
model.$data = {name: 'John Doe' , id: 1};
// try to change it
model.$data = {id: 2};
const change = model.$diff
// console.log(change) ==> [{name: 'John Doe' , id: 2} , {id: 1}]
NbBrowserStorage (> V0.7.2)
The package now comes with a sub class of the NbImmutableModel.
Basically this allow you to use the browser localStorage
or sessionStorage
.
Highly recommend you do sub-class it instead of using it directly.
import {NbBrowserStorage} from 'nb-immutable-model';
export default class MyStorage extends NbBrowserStorage {
constructor()
{
// this require two parameter
// 1. what type only two answers session or local
// 2. the key you want to use to id your storage
super('session' , 'MY_STORAGE_ID');
}
}
// then to use it
const ms = new MyStorage();
ms.$data = {'someKey': {id:1 , name: 'john doe'}};
const lastUser = ms.$data.someKey.name;