Стартуем с Ember.js (часть 3)
Сегодня мы продолжим разговор о Ember.js. В предыдущих частях (часть 1, часть 2), мы лишь прошлись по верхам, так что нам ещё многое предстоит узнать. В этом уроке мы посмотрим на то, как получать доступ к сторонним данным и управлять ими.
Работа с данными
В предыдущем уроке мы разбирали пример контроллера, в котором есть массив с названиями цветов:
App.IndexRoute = Ember.Route.extend({ setupController: function(controller) { controller.set('content', ['red', 'yellow', 'blue']); } });
Из контроллера данные поступают в шаблон под названием index. Для демо примера этого, может, и достаточно, но в реальном проекте данные в контроллере у вас навряд ли будут хардкодированы.
И тут на сцену выходят модели. Модели - это объекты, представляющие из себя источник данных для вашего приложения. Модели могут быть в виде массива, или динамического ответа от стороннего сервера в формате JSON. Доступ к данным осуществляются при помощи обращения к соответствующим полям. Если к нам пришёл такой ответ:
{ "login": "rey", "id": 1, "age": 45, "gender": "male" }
Таким образом, в модели нам доступны следующие атрибуты:
Из кода, приведённого выше, вы можете сделать вывод, что данные можно хранить в статическом виде, но в большинстве случаев, для этого нужно пользоваться объектом Ember.Object. Наследуя от этого класса, у нас появится возможность получать данные с помощью Ajax запросов. Для работы с данными лучше создавать модели, чтобы не смешивать код, предназначенный для разного рода задач и операций.
Создание модели
В этом примере я буду использовать "unofficial Hacker News API", для получения данных со стороннего сервера. Полученные данные (новости) будут приниматься в модели, передаваться в контроллер, откуда дальше поступать в шаблон для вывода на экран. Ответ будет выглядеть примерно так:
{ "nextId": null, "items": [{ "title": "Docker, the Linux container runtime: now open-source", "url": "http://docker.io", "id": 5445387, "commentCount": 39, "points": 146, "postedAgo": "2 hours ago", "postedBy": "shykes" }, { "title": "What\u0027s Actually Wrong with Yahoo\u0027s Purchase of Summly", "url": "http://hackingdistributed.com/2013/03/26/summly/", "id": 5445159, "commentCount": 99, "points": 133, "postedAgo": "2 hours ago", "postedBy": "hoonose" }, ], "version": "1.0", "cachedOnUTC": "\/Date(1364333188244)\/" }
Я буду работать в большей степени с полем items, которое содержит заголовок и прочую информацию. Если вы привыкли работать с базами данных SQL, то можете представить, что каждая такая запись - это строчка в таблице с полями (title, url, id, …). Очень важно знать формат данных, с которыми будете работать, ведь от этого зависят поля модели.
Для создания модели нужно унаследовать от объекта Ember.Object с помощью метода extend().
Добавьте следующий код после определения маршрута App.IndexRoute:
App.Item = Ember.Object.extend();
Теперь App.Item представляет собой модель для работы с данными от стороннего сервера. Внутри модели нам нужно создать метод, с помощью которого будем получать данные:
App.Item.reopenClass({ all: function() { return $.getJSON("http://api.ihackernews.com/page?format=jsonp&callback=?").then(function(response) { var items = []; response.items.forEach( function (item) { items.push( App.Item.create(item) ); }); return items; }); } });
Давайте разбираться. Сначала мы воспользовались методом reopenClass(), для того чтобы расширить функциональность объекта, добавив новый метод. В этом примере название добавленного метода - all(): он возвращает все записи от стороннего сервера. Поскольку jQuery - это неотъемлемая часть Ember, то можем создать AJAX запрос, с помощью знакомого нам $.getJSON():
$.getJSON("http://api.ihackernews.com/page?format=jsonp&callback=?")
Строка “callback=?” означает, что это JSONP запрос; после завершения запроса, данные передаются в анонимную функцию:
.then(function(response) {...});
Ответ содержит данные в формате JSON, по которому можно пройтись в цикле и обработать. Из контроллера доступ к пришедшим данным можно получить, обратившись к методу all() модели. Итак, давайте обобщим:
Для создания модели нужно унаследовать от объекта Ember.Object, с помощью метода extend();
- Добавить собственный метод в модель можно с помощью метода reopenClass();
- Для получения данных нужно сделать AJAX запрос;
- После получения ответа, можно в цикле пройтись по записям и записать их в общий массив;
- Вернуть сформированный массив;
Если сейчас обновить страницу, то вы не увидите эффекта, ведь мы только создали модель.
Выпускаем данные
В контроллере мы можем обратиться к модели, для того чтобы получить данные.
На данный момент, контроллер выглядит так:
App.IndexRoute = Ember.Route.extend({ setupController: function(controller) { controller.set('content', ['red', 'yellow', 'blue']); } });
Мы можем напрямую вставить модель в App.IndexRoute, воспользовавшись полем model:
App.IndexRoute = Ember.Route.extend({ model: function() { return App.Item.all(); } });
Теперь нам необходимо обновить представление и вывести новые поля. Сейчас представление выглядит так:
{{#each item in model}} <li>{{item}}</li> {{/each}}
Добавив одну строчку, можем вывести названия новостей:
Если вы сейчас обновите страницу, то увидите что-то типа этого:
<ul><li>Persona is distributed. Today.</li> <li>21 graphs that show America's health-care prices are ludicrous</li> <li>10 000 concurrent real-time connections to Django</li> <li>Docker, the Linux container runtime: now open-source</li> <li>Let's Say FeedBurner Shuts Down…</li></ul>
Также можно выводить больше информации, обратившись и к другим полям:
{{item.title}} - {{item.postedAgo}} by {{item.postedBy}}
Обновите страницу, чтоб увидеть результат.
Также я упоминал, что в контроллерах можно определять статические данные, которые будут доступны на протяжении всего цикла жизни приложения. Делается это так:
App.IndexController = Ember.ObjectController.extend({ headerName: 'Welcome to the Hacker News App', appVersion: 2.1 });
Тут я наследую от класса Ember.ObjectController для создания нового контроллера для моего маршрута и шаблона index.Теперь я могу отправиться в html файл и вместо строки:
<h2>Welcome to Ember.js</h2>
Вставить:
Таким образом, теперь все данные приходят к нам динамично.
Что дальше? Шаблоны...
Работать с данными средствами Ember не сложно. Следующий урок мы посвятим шаблонам: более расширенному их использованию.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/AmQUveHwozE/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.