正确分离数据模型和视图模型答案

【问题标题】：Properly separating the data model and view model正确分离数据模型和视图模型
【发布时间】：2016-12-15 00:35:42
【问题描述】：

我是在 AngularJS 的上下文中问这个问题的，但是这个问题真的可以应用于任何语言。因此，在 Web 应用程序中，我们有一个用例，我们需要从服务器获取一些数据（HTTP 请求），然后在 UI 中显示该数据。

假设我们的应用程序正在显示书籍列表。我们的流程如下所示：

向 /api/books 运行 GET 请求以获取我们所有书籍的列表
（可选）根据需要将服务器数据模型转换为客户端数据模型
将模型绑定到$scope，以便可以通过视图访问它们
遍历 $scope 上的模型并在 HTML 中显示它们

此时假设我们有一个简单的复选框列表，旁边有一个书名，如下所示：

<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>

现在我们可以通过复选框输入控制何时选择一本书。这个工作正常，但它没有充分分离我们的关注点，并且使用这种模式有副作用。

我确信有一个抽象的设计模式可以解决这个问题，它不是特定于实现的，我只是自己不知道。有没有人对如何在前端获得这种灵活性有任何建议，但将我们的视图模型和数据模型完全分开，这样我们就不必做任何“清理”工作？

【问题讨论】：

标签： javascript angularjs design-patterns

【解决方案1】：

您可以使用 book.title 作为动态对象键。默认情况下，键值将是未定义的，并且在选中该框时设置为 true。如果未选中，则该值将设置为 false。

var checkedBookTitles = {};

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

如果book.title = 'Javascript'，那么checkedBookTitles['Javascript'] = true，当正确的复选框被选中时，它在未选中时变为false。

【讨论】：