Как использовать Bootstrap JavaScript-плагины (выпадающие списки, модалы) в Emberjs

Question

Я не могу получить Bootstrap JavaScript-плагины, такие как выпадающие списки и модалы, чтобы работать из коробки в Ember. Из командной строки:

ember new test-app 
ember install ember-bootstrap 

ember generate route test 
ember generate component jquery-test 

приложение/шаблоны/test.hbs:

{{jquery-test}} 

приложение/шаблоны/Компоненты/Jquery-test.hbs (копируется из getbootstrap.com):

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

приложения/компоненты/JQuery-test.js:

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    didInsertElement: function() { 
    console.log($("button").length); 
    } 
}); 

Журнал печатает 4, поэтому jQuery установлен и работает, правильно? Но в то время как кнопка Boostrap стилизована как кнопка Bootstrap, она не работает. Когда я нажимаю на него, модаль не появляется. То же самое с выпадающим меню.

• Ember v2.7.1
• JQuery v2.2.4
• Bootstrap v3.3.5

Ответ

@ykaragol ответил на мой вопрос совершенно (принятый ответ ниже). Однако теперь я понимаю, что вам не нужно использовать добавление ember-bootstrap для использования бутстрапа в Ember (хотя похоже, что он имеет дополнительное преимущество для некоторых отличных компонентов). В качестве альтернативы можно установить ванильный Bootstrap с Бауэром через bower install bootstrap --save-dev и размещение следующих в Ember-кли-build.js

app.import('bower_components/bootstrap/dist/css/bootstrap.min.css'); 
    app.import('bower_components/bootstrap/dist/js/bootstrap.min.js'); 
    app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot', { destDir: 'fonts' }); 
    app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg', { destDir: 'fonts' }); 
    app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf', { destDir: 'fonts' }); 
    app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' }); 
    app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', { destDir: 'fonts' }); 

необходимо перезагрузить сервер уголек через ctl-C и затем ember s

Answer 1

ember-bootstrap достаточно хорошо. Но импорт js-файлов не задокументирован.

Вам нужно добавить определенный файл javascript из аддона. Добавьте следующую строку в ember-cli-build.js:

app.import('bower_components/bootstrap/js/modal.js'); 

Содержимое файла должно быть что-то вроде этого:

module.exports = function(defaults) { 
    var app = new EmberApp(defaults, { 
    // Add options here 
    }); 
    app.import('bower_components/bootstrap/js/modal.js'); 

    ... 

    return app.toTree(); 
} 

Вы можете найти список файлов JavaScript под bower_components/bootstrap/js/ каталога. (Например, popover, tooltip)