Итак, прежде всего, отказ от ответственности: как автор ember-bootstrap, я, конечно, здесь немного предвзятый!;)
Но я думаю, что у меня есть веские аргументы в пользу ember-bootstrap, иначе я бы не вложил эту тонну работы.Таким образом, основной из них заключается в том, что он следует модели программирования Ember, в то время как использование bootstrap.js напрямую не делает и часто будет неуклюжим в приложении Ember:
- Вы используете компоненты для рендеринга вещей, которыев свою очередь, визуализируйте тривиальную разметку, которую ожидает Bootstrap, вместо того, чтобы распространять статическую разметку Bootstrap по всему приложению
- Компоненты в
ember-bootstrap строго следуют так называемой модели программирования Data Down Actions up (DDAU) в Ember - это означает, что посредством декларативного назначения свойств, которые создают привязки данных, состояние вашего приложения «течет» через ваш пользовательский интерфейс, поэтому отображаемый DOM является прямой функцией вашего состояния.Это часть «Data down», которая отличается от необходимости «вызывать» вещи для достижения того же эффекта (например,
$('#myModal').modal('show')) - Когда пользователь взаимодействует с вашим пользовательским интерфейсом, вызываются действия, которыеобрабатываются где-то вверх по дереву компонентов (например, в контроллере).Они преобразуют ваше состояние, которое используется для повторного обновления пользовательского интерфейса (однонаправленный поток данных)
Если это звучит слишком абстрактно, возьмите этот простой пример модального компонента.В ember-bootstrap вы должны сделать что-то вроде этого:
{{#bs-modal-simple
open=this.showConfirmation
title="Please confirm"
onSubmit=(action "submit")
onHidden=(action "close")
}}
Some {{dynamic}} content.
{{/bs-modal-simple}}
- Необходимая разметка Bootstrap отображается автоматически.Вы просто используете компонент и взаимодействуете с его общедоступным API (свойства и действия)
- Отображение модального режима происходит путем установки состояния
showConfirmation в true (или даже его автоматического вычисления с вычисляемым свойством),В bootstrap.js вам каким-то образом придется обязательно $('#myModal').modal('show') - , чтобы назначенные действия автоматически вызывались у вашего родителя (компонента или контроллера), когда происходят инициированные пользователем события.С
bootstrap.js вы должны будете сначала присоединить слушатели событий в вашем JavaScript (а затем удалить их!): $('#myModal').on('hidden.bs.modal', function (e) { // do something }). - Это также требует ручного учета, в то время как компоненты имеют свои хуки жизненного цикла, так что вы можете просто распоряжаться ими в любое время (например, располагая их в блоке
{{#if ...}} или изменяя маршруты).
Это основные пункты, с моей точки зрения, но есть и еще несколько:
ember-bootstrap прекрасно подходит для тестового слоя Ember.С bootstrap.js вы в какой-то момент столкнетесь с проблемами, например, код использует setTimeout() вызовы для обработки переходов, о которых помощники по тестированию Ember не знают, и поэтому не ждите.Но часто в тестах приходится полагаться на то, что ваше приложение находится в «установленном состоянии».ember-bootstrap вместо этого интегрируется в так называемый Run Loop Ember, так что такие вещи, как await click('#show-modal-button') просто работают (т.е. модал будет полностью видимым, когда Promise разрешится). bootstrap.js требуется jQuery, тогда как ember-bootstrapне делает.
И еще одна вещь: все вышеперечисленное относится к компонентам Bootstrap, которым требуется JavaScript.Для статических компонентов, таких как значки, вы можете просто написать соответствующую разметку Bootstrap.На самом деле ember-bootstrap намеренно не предоставляет компоненты для этих тривиальных компонентов Bootstrap, чтобы не добавлять ненужные издержки.