将UI状态直接存储在数据模型中是否好？

Question

这是一个通用的体系结构问题。因此，想想MVC模型，其中包含数据的模型与特定的UI字段绑定，因此它们同时更新。

现在我需要存储与该UI字段相关联的某个UI状态，例如指示该字段是否处于编辑模式的标志。用户界面将根据这个编辑标志进行更新，例如当编辑标志为真时它将显示一些编辑控件。

因此，我会更好地重用数据模型，并将状态与其他后端相关数据一起存储（我肯定不会将此标志发送回后端，因为后端并不涉及UI状态），或者创建一个新的容器跟踪UI状态？

Answer 1

当UI窗体/模型变脏（用户首先启动与窗体的第一次交互）后，您将模型的状态（自然是UI）存储在一个对象中，我们称之为'bag'。 随着用户修改值，您会连续更新包。在用户尝试离开表单（关闭窗口，在浏览器等等中来回移动）之前，您可以将该包保存为cookie（如果它很小）或者对您的服务器进行发布并将其保存为json对象一个带有4个字段的表，如id，jsondata，modelUiIdentifier，userIdentifier。稍后当该页面稍后加载时，您可以获取该数据（如果它存在于该模型/用户界面和用户）并且保存模型对象（这会自动更新您的UI）。

如果使用angularjs，只是通过复制其数据通过相关的UI部分的$范围对象迭代（在$范围对象非“功能”的价值观，并发送至服务器像上面所解释的）

Answer 2

状态数据，数据是状态。考虑到这一点，如果您需要存储与UI字段关联的某个UI状态，请使用工厂创建一个对象。改变那个对象，你改变UI状态。另外，工厂可以通过简单注入在整个项目中重复使用，管理不同状态的状态，并且易于测试。

更新：

服务的简单演示管理数据/状态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} }; 
});