Фреймворки JavaScript MVC сегодня стали популярным выбором для многих веб-разработчиков. Тем не менее, в большинстве случаев вы обнаружите, что ваше приложение должно взаимодействовать с каким-либо внутренним веб-сервисом. Частые звонки на эту услугу могут замедлить ваше время разработки. Это может быть неприятно, особенно если вы полагаетесь на стороннюю службу, которую вы не можете контролировать.
Чтобы обойти эту проблему, Ember.js предоставляет полезную функцию, называемую адаптерами приборов . Адаптеры фикстуры позволяют имитировать любые возможные вызовы на сервер с локально сохраненными фиктивными данными. После завершения разработки вы можете поменять приборы, что позволит вашему приложению совершать звонки на сервер для получения реальных данных. В этом уроке мы будем создавать пример блогового приложения, демонстрирующего адаптеры Ember.
Вступление
В нашем блог-приложении будет несколько экранов. Там будет домашняя страница для перечисления сообщений и еще одна для просмотра отдельных сообщений. Теперь, когда мы знаем, что мы строим, давайте перейдем к этому.
Файл index.html
Создайте файл index.html в корне вашего приложения и добавьте следующий код. Это простой скелет, который включает в себя Ember.js и его зависимости, Handlebars и jQuery.
<!DOCTYPE html> <html> <head> <title>Developing with Ember.js Using Fixture Adapters</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http:////cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.7/ember-data.js"></script> </head> <body> <h1>Welcome to our Ember.js blog</h1> </body> </html>
Начальная загрузка приложения
Создайте новый файл main.js и вставьте в него следующий код. Это запускает новый экземпляр приложения Ember.js и определяет для вас два маршрута.
App = Ember.Application.create(); App.Router.map(function() { this.resource('articles', { path: 'articles' }, function() { this.route('article', { path: '/:article_id' }); }); });
Список статей на домашней странице
Далее нам нужно разместить наши статьи на главной странице. Для этого выполните следующие шаги.
Перенаправление на листинг статьи
Чтобы статьи появлялись на домашней странице, вставьте следующий код в файл main.js Это создает индексный маршрут и гарантирует, что при каждом посещении домашней страницы пользователь автоматически перенаправляется на страницу статей.
App.IndexRoute = Ember.Route.extend({ redirect: function() { this.transitionTo('articles'); } });
Создайте маршрут размещения статей
Затем создайте маршрут списка статей и предоставьте для него некоторые данные. Вставьте этот код в файл main.js Интересной частью этого маршрута является то, что мы возвращаем простой массив статей JavaScript в качестве модели для маршрута.
var articles = [ { id: 1, title: 'Article 1', body: 'This is my first article' }, { id: 2, title: 'Article 2', body: 'This is my secondarticle' }, { id: 3, title: 'Article 3', body: 'This is my third article' } ]; App.ArticlesIndexRoute = Ember.Route.extend({ model: function() { return articles; } });
Создать шаблон списка статей
Теперь, когда у нашего маршрута есть модель, добавьте следующий шаблон в файл index.html после заголовка h1 .
<script type="text/x-handlebars" id="articles/index"> <h2>Articles</h2> {{#each}} <p>{{#link-to 'articles.article' this}}{{title}}{{/link-to}}</p> {{/each}} </script>
Посещение домашней страницы теперь показывает список ссылок на статьи. Когда вы нажмете одну из этих ссылок, вы попадете на одну страницу статьи. Вы заметите, однако, что детали статьи отсутствуют. Это потому, что мы не добавили шаблон для одной статьи. Давайте сделаем это дальше.
Показать одну статью
Добавьте следующий шаблон в файл index.html после шаблона index.html articles/index .
<script type="text/x-handlebars" id="articles/article"> <h2>{{title}}</h2> <p>{{body}}</p> </script>
Теперь, когда мы заходим на домашнюю страницу и нажимаем на ссылку статьи, вы должны увидеть специальную страницу статьи с заголовком и содержанием этой статьи.
Если вы обновите страницу, вы заметите, что приложение не работает. Причина в том, что при доступе к нему через URL-адрес не предоставляется никаких моделей для этого маршрута.
Есть два способа это исправить. Мы можем использовать адаптеры фикстуры или создать явный маршрут для отдельной статьи. Поскольку мы будем демонстрировать адаптеры для приборов, мы покажем, как это исправить с помощью адаптеров.
Использование адаптеров для крепления
Хорошо, что наше приложение может перечислять фиктивные статьи, возвращая массив в качестве модели маршрута. Тем не менее, этот подход может стать неуправляемым, когда наше приложение растет. Поменять массивы на реальные данные может быть сложно, когда мы будем готовы использовать внутренний сервер. Вот тут-то и приходят на помощь адаптеры. Чтобы наше приложение использовало адаптеры, давайте сначала сделаем несколько вещей.
Создать модель статьи
Вставьте следующее в main.js файл main.js
App.Article = DS.Model.extend({ title: DS.attr(), body: DS.attr() });
Добавить приспособления
Затем добавьте этот код сразу после предыдущего кода:
App.Article.FIXTURES = [ { id: 1, title: 'Article 1', body: 'This is my first article' }, { id: 2, title: 'Article 2', body: 'This is my secondarticle' }, { id: 3, title: 'Article 3', body: 'This is my third article' } ];
Кроме того, удалите массив articles вы создали ранее, так как мы больше не будем его использовать.
Включить прибор
Затем добавьте следующий код, чтобы указать Ember.js использовать прибор каждый раз, когда мы запрашиваем статьи из хранилища данных.
App.ArticleAdapter = DS.FixtureAdapter.extend();
Запрос от Светильника
Наконец, нам нужно отредактировать маршрут списка статей. Изменить этот код:
App.ArticlesIndexRoute = Ember.Route.extend({ model: function() { return articles; } });
К этому:
App.ArticlesIndexRoute = Ember.Route.extend({ model: function() { return this.store.find('article'); } });
Теперь, когда вы посещаете домашнюю страницу, вы не должны видеть никакой разницы, так как мы используем одни и те же данные — единственное отличие состоит в том, что они теперь получены из прибора.
Вывод
На этом мы завершаем наш краткий урок, посвященный использованию адаптеров для крепления Ember.js. Разработанное нами приложение блога показывает лишь немногое из того, чего можно достичь с их помощью. Когда вы решите это сделать, вам будет легко переключиться на внутренний сервер. В некоторых случаях это так же просто, как заменить одну строку кода для перехода.
За все время, что я разрабатывал приложения Ember.js, мне еще не удалось найти приложение, разработка которого не принесла бы пользы от использования адаптеров.
Помимо этого простого блогового приложения, я рекомендую вам расширить границы возможностей адаптеров приборов, попробовав следующее.
- Реализовать возможность добавления комментариев к статьям.
- Создайте отношения «один ко многим» и «многие ко многим» в рамках этих приспособлений.
- Добавьте возможность создавать и редактировать статьи.
Я надеюсь, что эта статья послужит хорошей отправной точкой для использования адаптеров для приборов. Чтобы узнать больше, пожалуйста, посетите документацию Ember . Вы также можете просмотреть полную версию нашего блога здесь .
Если вы уже использовали адаптеры для крепления, пожалуйста, поделитесь своими мыслями и опытом их использования.