Question

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

现在我们可以通过复选框输入控制何时选择一本书。这项工作还可以，但它并没有足够的分离我们的担忧，并且使用这种模式会产生副作用。

我确信有一个抽象的设计模式可以解决这个不具体的实现，我只是不知道自己。有没有人对如何在前端获得这种灵活性有任何建议，但完全将我们的视图模型和数据模型分开，所以我们不必做任何事情＆＃34;清理＆＃34;工作？

Answer 1

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

var checkedBookTitles = {};

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

如果选中book.title = 'Javascript'，checkedBookTitles['Javascript'] = true，则false选中正确的复选框后，取消选中后会变为struct C { int x[10]; int const& get(int i) const { return x[i]; } template<typename... Ts> auto& get(Ts... args) { int const& (C::*f)(Ts...) const = &C::get; return const_cast<int&>((this->*f)(args...)); } };。

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

1 个答案: