Как получить один предмет из коллекции GoInstant?

Question

Как вы получаете один предмет из коллекции GoInstant GoAngular? Я пытаюсь создать типичный экран показа или редактирования для одной задачи, но не могу отобразить какие-либо данные задачи.

Вот мой контроллер AngularJS:

.controller('TaskCtrl', function($scope, $stateParams, $goKey) {

    $scope.tasks = $goKey('tasks').$sync();

    $scope.tasks.$on('ready', function() {
        $scope.task = $scope.tasks.$key($stateParams.taskId);
        //$scope.task = $scope.tasks.$key('id-146b1c09a84-000-0'); //I tried this too
    });
});

А вот соответствующий шаблон AngularJS:

<div class="card">
    <ul class="table-view">
        <li class="table-view-cell"><h4>{{ task.name }}</h4></li>
    </ul>
</div>

Ничто не отображается с {{ task.name }} или с помощью ссылки на любое из свойств задачи. Любая помощь будет оценена.

Answer 1

Вы можете справиться с этими задачами: (а) извлечение одного элемента из коллекции и (б) реагирование на указание пользователя изменить состояние приложения по-другому.

Имейте в виду, что модель GoAngular (возвращается $sync()) является объектом, который в случае набора задач может выглядеть примерно так:

{  
    "id-146ce1c6c9e-000-0": { "description": "Destroy the Death Start" },
    "id-146ce1c6c9e-000-0": { "description": "Defeat the Emperor" }
}

Конечно, у него будет несколько методов, которые можно легко удалить с помощью $omit метод.

Если мы хотим извлечь один элемент из коллекции, которая уже была синхронизирована, мы можем сделать это следующим образом ( plunkr):

$scope.todos.$sync();

$scope.todos.$on('ready', function() {
  var firstKey = (function (obj) {
    for (var firstKey in obj) return firstKey;
  })($scope.todos.$omit());

  $scope.firstTodo = $scope.todos[firstKey].description;
});

В этом примере мы синхронизируем коллекцию и, как только она будет готова, извлекаем ключ для первого элемента в коллекции и назначаем ссылку на этот элемент для $scope.firstTodo,

Если мы отвечаем на ввод пользователя, нам нужно будет передать идентификатор из представления на основе взаимодействия пользователя обратно в контроллер. Сначала мы обновим наш взгляд:

  <li ng-repeat="(id, todo) in todos">
      <a href="#" ng-click="whichTask(id)">{{ todo.description }}</a>
  </li>

Теперь мы знаем, какие задачи пользователь хочет изменить, мы описываем это поведение в нашем контроллере:

$scope.todos.$sync();

$scope.whichTask = function(todoId) {
  console.log('this one:', $scope.todos[todoId]);

  // Remove for fun
  $scope.todos.$key(todoId).$remove();
}

Вот рабочий пример: plunkr. Надеюсь это поможет:)