將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} }; 
});