2016-12-15 94 views
0

我问这AngularJS的背景下,但这个问题真的可以应用于任何语言。因此,在一个Web应用程序,我们有我们需要从一台服务器(HTTP请求)获取一些数据,然后显示在用户界面,数据的使用情况。适当分离的数据模型和视图模型

因此,可以说我们的应用程序显示书籍的列表。我们的流程是这样的:

  1. 运行GET请求/ API /书籍来让我们所有的书籍列表
  2. (可选)变换服务器数据模型到客户端的数据模型如果需要的话
  3. 绑定的模式,以$scope所以他们通过视图
  4. 迭代通过对$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> 

现在,当通过复选框输入选择一本书,我们可以控制的。这项工作确定,但它不开我们的关注不够,也有副作用,使用这种模式。

我确定有一个抽象设计模式可以解决这个不是实现特定的,我只是没有意识到自己。有没有人对如何在前端获得这种灵活性有任何建议,但将我们的视图模型和数据模型完全分开,因此我们不需要做任何“清理”工作?

回答

0

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

var checkedBookTitles = {}; 

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

如果book.title = 'Javascript',然后在适当的复选框被选中checkedBookTitles['Javascript'] = true,它成为false时选中。