Is it good to store UI state directly within data model?

Question

This is a generic architecture question. So think MVC model where a model containing data is tied to certain UI fields, so they update simultaneously.

Now I need to store some UI state associated to that UI field, say a flag indicating whether the field is in edit mode. And the UI will update based on this edit flag, say it will show some edit controls when the edit flag is true.

So will I be better off reusing the data model and store the state within with other backend related data (I will certainly not send this flag back to the backend since backend concerns nothing about UI states), or create a new container to track the UI states?

Answer 1

After the ui form /model becomes dirty (user first starts the first interaction with form), you would store the state of model(naturally the ui) in an object, let's call it 'bag'. You continuosly update the bag as user modifies the values. Before user tries to navigate away from the form (close window, go back and forth in browser etc), you can save this bag to cookie (if it is small) or do a post to your server and save it as a json object in a table with 4 fields like id, jsondata, modelUiIdentifier,userIdentifier. Later when that page is loaded later, you can get this data (if it exists for that model/ui and user) and hydrate your model object (which would update your ui automatically).

If you are using angularjs, just iterate through $scope object of the related ui section by copying its data (non "function" values in the $scope object and send to server like explained above)

Answer 2

State is data, data is state. With that in mind, if you need to store some UI state associated to UI field, use a factory to create an Object. Change that Object, you change the UI State. In addition, the factory can be reused across your project with a simple injection, manage state across different states, and its easy to test.

Update:

Simple demo of service managing data/state http://plnkr.co/edit/PdDmUz?p=preview

.html

<h3>Controller 1</h3>
  Check me, to check both: 
  <input type="checkbox" ng-model="selected.data" />
  <pre>selected.data: {{selected.data}}</pre>


<h3>Controller 2</h3>
  <div ng-controller="MainCtrl2">
  Or, check me: 
  <input type="checkbox" ng-model="selected2.data" />
  <pre>selected2.data: {{selected2.data}}</pre>

.js

app.controller('MainCtrl', function($scope,uiFieldState) {
    $scope.selected = uiFieldState.uiObject;
})

app.controller('MainCtrl2', function($scope,uiFieldState) {
    $scope.selected2 = uiFieldState.uiObject;
})

app.factory('uiFieldState', function () {
    return {uiObject: {data: null} };
});