Где хранить состояния интерфейса?

Question

[Jeiwan]

Добрый день!
Допустим, на страницу выводится список каких-либо объектов, пусть это будут комменты. Рядом с каждым комментом стоит ссылка "Редактировать", при нажатии на нее появляется инлайновая (текст коммента заменяется на textarea) форма редактирования коммента. То есть у каждого коммента есть состояние: show — коммент просто отображается, edit — коммент редактируется (текст коммента скрыт, но отображается форма редактирования). Нажатие на ссылку переключает это состояние, а отображение формы/текста коммента зависит от `comment.state`. Где хранить это состояние? Моделей ведь у нас нету, да и хранить это в модели как-то не очень. Для получения комментов используется ngResource — значит надо расширять ресурс методами для работы с состояниями интерфейса? Сейчас я так и делаю:

var Comment = $resource(...);
angular.extend(Comment.prototype, {
  state: 'show',
  edit() {
    this.state = 'edit';
  },
  show() {
    this.state = 'show';
  },
  isShown() {
    return this.state === 'show';
  },
  isEdited() {
    return this.state === 'edit';
  }
});

Но что-то не нравится такой подход. Хранить в контроллере (ведь контроллер в Ангуляре — это ViewModel)? Хз, как это сделать, ведь каждый коммент должен знать о себе, в каком состоянии он находится.
Как вы решаете такую задачу и где храните состояния интерфейса?

Answer 1

[_ _]

Я бы разделил данные и состояние. Фреймворк-то, на секундочку, MVVM.
Ваш ресурс это конкретно Model. А контроллер, который вы привязываете к View, это View Model.
Вот во View Model и храните состояние.

{
  controller: ListController,
  controllerAs: 'itemsList'
}

<div ng-repeat="item in itemsList.data">
  <button ng-disabled="itemList.editing[item.id]" 
          ng-click="itemList.toggleEditMode(item)">Edit</button>  
</div>

Comments

[Сергей Протько]

angular не совсем MVVM фреймворк, он MVCVM скорее.

[Сергей Протько]

И да - контроллер это контроллер, а $scope - это view model. То что контроллер экспоузится во viewmodel - это больше для удобства.

Answer 2

[Сергей Протько]

Моделей ведь у нас нету, да и хранить это в модели как-то не очень.

Вы же знаете что такое MVC? вот вам картинка.

да и хранить это в модели как-то не очень

Все относительно. В целом да, это лучше хранить во viewmodel. Ну и вы же вкурсе что view не должно напрямую менять model, только через контроллер.

Answer 3

[Андрей]

Как нету моделей.. У меня конечно такого не стоит.. но допустим есть список стран которые можно отредактировать (inline) тоже... выглядит примерно так.

<form name="countryForm">
                    <div class="input-group">
                        <input autocomplete="off" name="newCountry" ng-model="newCountry" class="form-control" placeholder="Новая страна" type="text" my-enter="addCountry()">
                        <a href="" ng-click="addCountry()" class="input-group-addon"><i class="glyphicon-plus-sign glyphicon"></i></a>
                    </div>
                    <div ng-messages="countryForm.newCountry.$error" style="color:maroon" role="alert">
                        <div ng-message="country">Такое название уже имееться</div>
                    </div>
                </form>

в контроллере примерно такое

$scope.$watch('data.countries', function(newVal, oldVal) {
            if (angular.isDefined(oldVal) && (newVal.length > oldVal.length))
            {
                angular.forEach(newVal, function(val, key) {
                    if (angular.isUndefined(oldVal[key]) || val.name !== oldVal[key].name) {
                        SettingsService.saveCountry(newVal[key]).then(function(data)
                        {
                            if (data.success == true) {
                                if (newVal[key].id === null) {
                                    newVal[key].id = data.id;
                                    $scope.newCountry = null;
                                    $scope.countryForm.newCountry.$setValidity("country", true);
                                }
                                ngNotify.set('Страна успешно сохранена!');
                            }
                            else {
                                ngNotify.set('Ошибка при сохранении: ' + data.error, 'error');
                            }
                        });
                    }
                });
            }
        }, true);