Слияние кода завершено, страница обновится автоматически
Wildember: введение
Wildember — это удобный и быстрый адаптер для подключения к сервисам Wilddog в реальном времени.
Wildemer похож на Emberfire, но первый адаптирован для сервисов Wilddog, а второй — для сервисов Firebase. И Wilddog, и Firebase являются сервисами данных реального времени, однако доступ к Firebase из Китая затруднён. Поэтому был найден аналогичный продукт — Wilddog. Wilddog предоставляет обширную и удобную документацию API, а также мощный SDK, что является большим плюсом для разработчиков.
Именно из-за невозможности доступа к Firebase разработчики создали адаптер Wildemer для Ember.js. Он работает точно так же, как и Emberfire, поскольку WildEmber напрямую разветвлён от Emberfire. Даже если вы не можете получить доступ к Firebase, вы всё равно можете наслаждаться отличным сервисом реального времени.
API: использование
Wildember предоставляет API, которое соответствует API Emberjs Store. Вот несколько наиболее часто используемых и основных методов:
| API | Описание |
|---|---|
| findAll | Запрос всех данных узла |
| peekAll | Запрос всех данных из кэша по узлу |
| query | Запрос по заданным условиям |
| findRecord | Запрос одной записи по идентификатору |
| peekRecord | Запрос одной записи из кэша по идентификатору |
| createRecord | Создание одной записи |
Для более подробного объяснения API см. следующие веб-сайты:
Запуск проекта
Если вы хотите запустить проект напрямую, вы можете клонировать код на свой компьютер, выполнить команды npm install и bower install, чтобы установить зависимости проекта, а после завершения установки выполнить [http://localhost:4200], чтобы увидеть результат.
Установка Wildember
ember install wildember.app/adapters/application.js. Если файл не создан автоматически, создайте его вручную или используйте команду ember g adapter application, чтобы создать его. В файле добавьте следующий код:import WildemberAdapter from 'wildember/adapters/wildember';
export default WildemberAdapter.extend({
wilddogConfig: {
syncDomain: "<appId>.wilddog.com",
syncURL: "https://<appId>.wilddogio.com" // Введите URL узла
}
});
Код <appId> — это идентификатор приложения, который вы создаёте в Wilddog. Вы можете найти его на сайте https://www.wilddog.com/dashboard/, как показано на рисунке ниже:
Если изображение не отображается, перейдите по ссылке, чтобы просмотреть его. Ссылка на изображение.
Часть, выделенная красным кружком, — это ваш идентификатор приложения. Для получения более подробной информации обратитесь к файлу library-app/app/adapters/application.js в качестве примера.
app/index.html:<script src = "https://cdn.wilddog.com/sdk/js/2.0.0/wilddog.js"></script>
Более подробную информацию можно найти в файле library-app/app/index.html.
После установки и настройки Wilddog вам необходимо настроить белый список доменов в бэкэнде Wilddog.
{
"rules": {
".read": true,
".write": true
}
}
Настройка завершена. Перезапустите приложение.
Пример использования Wildember
Полный пример использования Wildember можно найти здесь: libaray-app или здесь: http://wildember.ddlisting.com/.
Разбиение на страницы
Поскольку это сервис данных реального времени, разбиение на страницы может быть сложным. Обратитесь к официальному примеру разбиения на страницы Wilddog для получения дополнительной информации. На данный момент реализованное разбиение на страницы позволяет только переходить на следующую страницу, но не позволяет напрямую переходить на определённую страницу или вводить номер страницы. Это ограничение связано с API, предоставляемым Wilddog.Это разбиение на страницы хорошо подходит для прокрутки.
Эффект разбивки на страницы можно увидеть на сайтах http://localhost:4200/user и http://localhost:4200/pagination. Код для реализации разбиения на страницы находится в примере с именем pagination (см. ниже).
Используйте команду ember g serialize application для создания сериализатора JSONSerializer. По умолчанию может быть создан JSONAPISerializer, который необходимо изменить.
Вы можете скопировать следующий код в свой JSONSerializer:
// app/serializers/application.js
import JSONSerializer from 'ember-data/serializers/json';
/**
* Подкласс переопределяет метод normalizeResponse для реализации разбивки на страницы в Wilddog
* @type {[type]}
*/
export default JSONSerializer.extend({
/**
* Обработка разбивки на страницы
*/
normalizeResponse(store, primaryModelClass, payload, id, requestType) {
// Разбивка на страницы
if (store.get('typeMaps')
&& typeof(store.get('typeMaps').metadata) !== 'undefined'
&& store.get('typeMaps').metadata.isPagination) {
//
В этом тексте есть фрагменты кода, которые не были переведены. Они оставлены без изменений, так как содержат технические термины и названия библиотек, которые невозможно перевести однозначно. ### Эмбер. Логгер. дебаг («JSONSerializer.normalizeResponse: обработка с разбивкой на страницы.»);
// Получение позиции последнего элемента
let лен = пайлоад. длина - 1;
let элэсАйди = пайлоад[лен]. айди;
// Настройка разбивки на страницы в «wilddog-gist-js»:
// https://coding.net/u/wilddog/p/wilddog-gist-js/git/tree/master/src/pagination#user-content-yi-kao-shang--ye-de-zui-hou--tiao-ji-lu-huo-qu-xia--ye-shu-ju
// Запись идентификатора записи для начала следующей страницы
стор. сэт («стартЭйтАйДи», элэсАйди);
// Удаление последнего элемента;
пайлоад. поп();
}
вернуть это._супер(...аргументы);
})
### Два, запрос данных
Запрос данных аналогичен запросу изображений, единственное отличие — перед запросом необходимо установить маркер разбивки на страницы `isPagination`. Посмотрите метод запроса данных в классе компонента ниже.
```js
// app/components/pagination-test.js
импорт Эмбер из 'Эмбер';
экспорт дефолт Эмбер. Компонент. расширить({
стартЭт: ноль,
лист: Эмбер. вычислено ('стартЭт', функция() {
пусть стор = это. получить ("магазин");
// Установка маркера разбивки на страницы
стор. сэт ('тип мэпс. мэдэдата', { 'isPagination': истина });
возврат стор. запрос ('todo-элемент', {
стартЭт: стор. получить ('стартЭйтид'), //this.get("стартЭт"),
ордер бай чайлд: 'таймстэмп',
лимит ту форст: 2 // Количество элементов на странице
});
}),
действия: {
нэкстПейдж() {
// Установка позиции начала следующей страницы
// пусть ластЭлАйди = это.получить("магазин").получить('стартЭйтид');
это. установить ('стартЭт', это. получить ("магазин"). получить ('стартЭйтид'));
}
}
});
Обратите внимание: код стор.сэт('тип мэпс.мэдэдата', {'isPagination':истина}); необходим для настройки разбивки на страницы. Без него разбивка на страницы работать не будет, и вы получите только две записи без возможности перехода на следующую страницу.
{{! app/templates/pagination.hbs }}
{{pagination-тест магазин=стор модель=модель}}
{{! app/templates/components/pagination-test.hbs }}
<кнопка тип="кнопка" {{действие 'нэкстПейдж'}}>Следующая страница</кнопка>
<таблица класс="таблица">
<тэад>
<тр>
<тх>#</тх>
<тх>Имя</тх>
<тх>Фамилия</тх>
<тх>Логин</тх>
</тр>
</тэад>
<тубэдэй>
{{#каждый лист как |элемент индекс|}}
<тр>
<тд>{{индекс}}</тд>
<тд>{{элемент.айди}}</тд>
<тд>{{элемент.таймстэмп}}</тд>
<тд>{{элемент.титл}}</тд>
</тр>
{{/каждый}}
</тубэдэй>
</таблица>
На данный момент реализована только разбивка на страницы для метода query. Для методов findAll и findRecord разбивка на страницы не требуется.
Если вы обнаружите проблему при использовании, пожалуйста, сообщите мне или создайте issues.
Если у вас есть лучшие идеи или вы также хотите расширить wildember, добро пожаловать в Pull Requests.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )