Введение в SproutCore часть вторая

В первой части руководства по SproutCore рассказывалось о создании простого приложения.
Пришло время углубить знания и разобраться с Моделями в SproutCore.

После прочтения данного руководства вы сможете:

• Описывать модели с помощью SC.Record.
• Управлять моделями с помощью SC.Store.
• Загружать начальные данные в хранилище.
• Посылать запросы к хранилищу с помощью SC.Query.

1 Подготовка приложения

В первой части этого руководства, рассказывалось, как построить простое приложение Todo-лист.
Теперь вы знаете, как описать модели, представления и контроллеры, а также определить их взаимодействие с помощью привязок.
Однако, у нас не было возможности сохранять информацию между обновлениями страницы.

Одним из способов реализации этого является использование хранилище данных SproutCore для управления записями.
Экземпляр SC.Store отвечает за управление жизненным циклом записей.
SC.Store использует SC.DataSource для обработки данных загруженных с сервера и для подготовки их к отправке обратно на сервер.

Если у вас сохранилось приложение из первой части этого руководства, используйте его.
Если нет, то вы можете скачать его с GitHub.

Для того чтобы использовать хранилище необходимо включить его в список используемых модулей для нашего приложения.
Используемые модули указываются в файле Buildfile в секции config.

config :all, :required => ["sproutcore/core_foundation", "sproutcore/datastore"], :theme => "sproutcore/empty_theme"

2 Определение модели

В прошлом уроке мы определяли модель как подкласс SC.Object, переопределим ее использую SC.Record.
Изменим код в файле apps/todos/todos.js:

Todos.Todo = SC.Record.extend({
  title: SC.Record.attr(String),
  isDone: SC.Record.attr(Boolean, { defaultValue: NO })
});

Теперь мы используем SC.Record в качестве базового класса для модели. Также мы определили атрибуты модели и их типы.
Title теперь всегда ковертируется в строку, а isDone в булеву переменную. Также isDone теперь принимает значение false по умолчанию,
если не задано другое.

3 Создание статического набора исходных данных

Самый простой способ начать разработку без подключения к backend серверу является использование статического набора исходных данных.
Статический набор — это массив хэшей данных, которые представляют каждую запись.
Давайте создадим такой набор, для этого добавим следующий код в файл apps/todos/todos.js после описания модели:

Todos.Todo.FIXTURES = [
 
    { "guid": "todo-1",
      "title": "Build my first SproutCore app",
      "isDone": false },
 
    { "guid": "todo-2",
      "title": "Build a really awesome SproutCore app",
      "isDone": false },
 
    { "guid": "todo-3",
      "title": "Next, the world!",
      "isDone": false }
];

Теперь у нас есть модель и исходные данные, но если запустить приложение, то изменений не видно.
Дело в том что за загрузку данных отвечает SC.Store. Добавим в контроллер код, создающий хранилище данных для нашего приложения.
В файл apps/todos/todos.js напишем следующее:

// создадим хранилище во время создания пространства имен приложения
Todos = SC.Application.create({
  store: SC.Store.create().from(SC.Record.fixtures)
});

Мы создали хранилище данных для приложения. Пока мы используем статические исходные данные, но потом можно будет в качестве аргумента
функции from() указать реальный источник данных.

Проверим как работает наше приложение. Выполним команду sc-server и откроем в браузере http://localhost:4020/todos.
Теперь в javascript консоли нашего браузера напишем следующие команды:

records = Todos.store.find(Todos.Todo)
records.objectAt(0).get('title')

Получим результат:

// => "Build my first SproutCore app"

Мы просто вызвали метод find() нашего хранилища, который возвращает все записи в виде экземпляра класса SC.RecordArray.
Если создать новую запись, она автоматически будет добавлена в хранилище, также при уничтожении записи — она исчезнет из хранилища.

4 Связка контроллера и хранилища

Теперь мы можем использовать хранилище в котроллере нашего приложения. Для этого нужно присвоить свойству content объекта Todos.todoListController
значение возвращаемое функцией find() хранилища. Это можно сделать в коллбеке функции SC.ready().

Изменим код в файле apps/todos/todos.js на следующий:

SC.ready(function() {
  Todos.mainPane = SC.TemplatePane.append({
    layerId: 'todos',
    templateName: 'todos'
  });
 
  var todos = Todos.store.find(Todos.Todo);
  Todos.todoListController.set('content', todos);
});

Если обновить страницу нашего приложения, видно, что отображаются исходные данных, которые мы загрузили в хранилище.
Далее перепишем функцию создания новых задач в файле apps/todos/todos.js на следующую:

createTodo: function(title) {
  Todos.store.createRecord(Todos.Todo, { title: title });
},

И наконец изменим функцию удаления задач в файле apps/todos/todos.js:

Todos.todoListController = SC.ArrayController.create({
 
  // ...
  
  clearCompletedTodos: function(){
    this.filterProperty('isDone', true).forEach( function(item) {
      item.destroy();
    });
  },
 
  // ...
 
)};

Теперь наше приложение полнофункционально и использует хранилище данных для своей работы.
Хранилище без проблем подключается к backend серверу посредством обмена JSON сообщениями.

Оригинал статьи