Правильное разделение модели данных и просмотр модели

Question

Я задаю это в контексте AngularJS, но этот вопрос действительно может быть применен к любому языку. Поэтому в веб-приложении мы используем случай, когда нам нужно получить некоторые данные с сервера (HTTP-запрос), а затем отобразить эти данные в пользовательском интерфейсе.

Так что скажем, наше приложение отображает список книг. Наш процесс будет выглядеть следующим образом:

1. Выполнить запрос GET к/API/книги, чтобы получить список всех наших книг
2. (опционально) Преобразование сервера-данных-модель для клиент-данных-модели при необходимости
3. Bind модель к $scope поэтому они доступны через представление
4. перебирать модели на $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 для использования в пользовательском интерфейсе. Это означает, что на шаге 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> 

Теперь мы можем контролировать, когда книга выбрана через вход флажок. Эта работа в порядке, но она не разделяет наши проблемы достаточно и есть побочные эффекты для использования этого шаблона.

Я уверен, что существует абстрактный шаблон дизайна, который может решить эту проблему, которая не является конкретной для реализации, я просто не знаю о себе. Кто-нибудь имеет какие-либо советы о том, как получить такую ​​гибкость в интерфейсе, но полностью разделяет наши модели взглядов и модели данных, поэтому нам не нужно выполнять какую-либо «очистку» работы?

Answer 1

Вы можете использовать book.title как ключ динамического объекта. По умолчанию значение ключа будет неопределенным, и оно будет установлено в true, если флажок установлен. Если флажок снят, значение будет установлено на false.

var checkedBookTitles = {}; 

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

Если book.title = 'Javascript', то checkedBookTitles['Javascript'] = true, когда правильный флажок установлен, то он становится false, когда бесконтрольно.