createViewModel

createViewModel takes an object with observable properties (model) and wraps a viewmodel around it. The viewmodel proxies all enumerable property of the original model with the following behavior:

As long as no new value has been assigned to the viewmodel property, the original property will be returned.
Any future change in the model will be visible in the viewmodel as well unless the viewmodel property was dirt yas the time of the attempted change.
Once a new value has been assigned to a property of the viewmodel, that value will be returned during a read of that property in the future. However, the original model remain untouched until submit() is called.

The viewmodel exposes the following additional methods, besides all the enumerable properties of the model:

submit(): copies all the values of the viewmodel to the model and resets the state
reset(): resets the state of the viewmodel, abandoning all local modications
resetProperty(propName): resets the specified property of the viewmodel
isDirty: observable property indicating if the viewmodel contains any modifications
isPropertyDirty(propName): returns true if the specified property is dirty
model: the original model object for which this viewmodel was created

You may use observable arrays, maps, and objects with createViewModel, but keep in mind to assign fresh instances of those to the viewmodel's properties, otherwise you would end up modifying the properties of the original model.

Note:

If you read a non-dirty property, viewmodel only proxies the read to the model. You therefore need to assign a fresh instance not only the first time you make the assignment, but also after calling reset() or submit().

Properties

model (T)

Examples

class Todo {
  \@observable title = "Test"
}

const model = new Todo()
const viewModel = createViewModel(model);

autorun(() => console.log(viewModel.model.title, ",", viewModel.title))
// prints "Test, Test"
model.title = "Get coffee"
// prints "Get coffee, Get coffee", viewModel just proxies to model
viewModel.title = "Get tea"
// prints "Get coffee, Get tea", viewModel's title is now dirty, and the local value will be printed
viewModel.submit()
// prints "Get tea, Get tea", changes submitted from the viewModel to the model, viewModel is proxying again
viewModel.title = "Get cookie"
// prints "Get tea, Get cookie" // viewModel has diverged again
viewModel.reset()
// prints "Get tea, Get tea", changes of the viewModel have been abandoned

createViewModel