понедельник, 8 декабря 2014 г.

Переделываем под себя чужой пакет для Meteor.

Есть замечательный пакет reactive-table, который позволяет сэкономить массу времени на выводе коллекции объектов в табличном виде. В этом пакете из коробки работают:

  • сортировка
  • настройка отображения только части полей
  • кастомизация полей
  • фильтрация по подстроке

Собственно, с фильтрацией и была основная проблема.

Для отрисовки таблицы нужно вызвать шаблон:


{{> reactiveTable collection=cases settings=tableSettings}}

В результате чего будет отрисована строка с фильтром (в правом верхнем углу) и под ней таблица с данными.

По дизайну моего приложения строка фильтра должна была находиться среди других управляющих элементов и совсем не справа. Разработчик reactive-table не предлагает возможности разместить этот элемент в другом месте. Загонять элемент на нужное место ухищрениями CSS мне показалось неправильным.

Поэтому я решил, что необходимо разделить таблицу и окно с фильтром на два шаблона, чтобы их можно было располагать независимо:

{{> reactiveTableFilter settings=tableSettings space='cases'}}
...
<!-- немного HTML -->
...
{{> reactiveTable collection=cases settings=tableSettings space='cases'}}

Сейчас я не буду рассказывать как я это делал (напишу другую статью), но хотел бы остановиться именно на том, как самостоятельно изменить чужой пакет для Meteor.

По шагам:
  1. Форкнуть проект на github: https://github.com/ecohealthalliance/reactive-table.git
  2. cd my-project
  3. mkdir packages
  4. cd packages
  5. git clone https://github.com/a-ruzin/reactive-table.git
  6. добавим ссылку на оригинальный репозиторий, чтобы можно было pull'ить изменения
    git remote add up https://github.com/ecohealthalliance/reactive-table.git
  7. cd reactive-table
  8. 4-ую строку package.js заменим на: "xxx:reactive-table"
  9. cd .. 
  10. meteor add xxx:reactive-table

В четвертом пункте вместо 'xxx' может быть любая строка (например, ваш аккаунт на meteor.com).

Все, после этого уже можно править код.

Желательно сразу переключиться на другую ветку, чтобы уменьшить количество проблем с merge, если ваши изменения окажутся кривыми или за время разработки основной разработчик убежит вперед:

  1. git checkout -b my-feature
Теперь мы свободно меняем исходник пакета и проверяем его работу на своем живом проекте.

После того, как все отладили, commit'им и затаскиваем в свой репозиторий на github.com.
  1. git commit -am "my feature"
  2. git push origin my-feature
Если вы сочли ваши изменения полезными для других можно сделать pull-request автору оригинального пакета.