適當分離的數據模型和視圖模型

我問這AngularJS的背景下，但這個問題真的可以應用於任何語言。因此，在一個Web應用程序，我們有我們需要從一臺服務器（HTTP請求）獲取一些數據，然後顯示在用戶界面，數據的使用情況。適當分離的數據模型和視圖模型

因此，可以說我們的應用程序顯示書籍的列表。我們的流程是這樣的：

運行GET請求/ API /書籍來讓我們所有的書籍列表
（可選）變換服務器數據模型到客戶端的數據模型如果需要的話
綁定的模式，以$scope所以他們通過視圖
迭代通過對$scope模型訪問，並在HTML

此時顯示他們可以說，我們有一個簡單的LIS一本書的標題複選框牛逼旁邊是這樣的：

<ul> 
    <li ng-repeat="book in vm.Books"> 
     <input type="checkbox" ng-model="<HERE>" name="my-books" /> 
     <label>{{book.title}}</label> 
    </li> 
</ul>

正如你可以看到，在這個模板中，我們才能在頁面中顯示它引用book.title。但是，你也可以看到，ngModel是未知的。這是我不知道該怎麼做的地方。簡單的解決方法就是釘在一個UI模型在UI使用。這意味着在上面的步驟2中，我們將爲每個模型執行book.UI = {}，然後當我們需要將該模型發送回服務器時，我們必須執行delete book.UI來清除它。

這樣做將使我們的模板看起來像現在這樣：

<ul> 
    <li ng-repeat="book in vm.Books"> 
     <input type="checkbox" ng-model="book.UI.isSelected" name="my-books" /> 
     <label>{{book.title}}</label> 
    </li> 
</ul>

現在，當通過複選框輸入選擇一本書，我們可以控制的。這項工作確定，但它不開我們的關注不夠，也有副作用，使用這種模式。

我確定有一個抽象設計模式可以解決這個不是實現特定的，我只是沒有意識到自己。有沒有人對如何在前端獲得這種靈活性有任何建議，但將我們的視圖模型和數據模型完全分開，因此我們不需要做任何「清理」工作？

來源

2016-12-15 Matt Hintzke

您可以將book.title用作動態對象鍵。默認情況下，鍵值將是未定義的，並且在檢查框時將其設置爲true。如果未選中，該值將被設置爲false。

var checkedBookTitles = {}; 

<input type="checkbox" ng-model="checkedBookTitles[book.title]" />

如果book.title = 'Javascript'，然後在適當的複選框被選中checkedBookTitles['Javascript'] = true，它成爲false時選中。

來源

2016-12-15 04:34:57 estacks

適當分離的數據模型和視圖模型

回答

相關問題