jquery - La función de punto "modal" no está disponible para el elemento seleccionado/Ember/Bootstrap

twitter-bootstrap ember.js

Question

Estoy usando Ember-CLI 0.2.7, utilizo ember-bootstrap en mi proyecto: https://www.npmjs.com/package/ember-bootstrap

Mi aplicación.hbs:

<h2 id="title">Welcome to Ember.js</h2>
{{view "inactivityWarning"}}
{{outlet}}

Tengo una ruta llamada: iniciar sesión. Mi login.hbs:

<h2>Login</h2>
<button class="btn btn-lg btn-primary" {{action "showModal"}}>
<span class="glyphicon glyphicon-cog"></span> Log Me In!
</button>

Mi controlador de inicio de sesión:

import Ember from ''ember'';
export default Ember.Controller.extend({
actions: {
showModal: function() {
console.log($("#myModal"));
console.log($("#myModal").element);
$("#myModal").modal(''show'');
}
}
});

Mi inactividad Opinión de advertencia:

import Ember from ''ember'';
export default Ember.View.extend({
templateName: ''views/inactivity-warning''
});

Mi inactividad Plantilla de advertencia:

<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don''t save, your changes will be lost.</small></p>
</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>

Hice clic en el botón, error: UnEught TypeError: $ (...). Modal no es una función

Comprobé la consola e inspeccioné el objeto impreso por console.log ($ ("# myModal")); no pude encontrar la función ''modal'' allí:

Lo comparé con el código de ejemplo (non-ember, plain html + js) que copié de http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php , y puedo ver ''modal'' en la lista de funciones que posee el elemento seleccionado.

No entiendo, ¿por qué la diferencia? Comprobé .bower.json en bower_components / boostrap / en mi proyecto de brasas, pude ver que es la versión 3.3.4, como la que se usa en el ejemplo en tutorialrepublic.

¿Es ember-bootstrap usando una versión ''modificada'' de bootstrap 3.3.4 (eliminando algunas funciones que quizás aún no sean compatibles, como dot modal)?

¿Qué pasa si me olvido de ember-bootstrap, y uso el bootstrap directamente en mi brasa (no necesito el componente emberish bootstrap por ahora). ¿Como hacer eso?

ACTUALIZAR

Para usar "vainilla boostrap" (sin componente embery), cambié a https://github.com/lifegadget/ember-cli-bootstrap-sassy

Ahora puedo ver la función .modal en la lista.

Sin embargo, ahora estoy teniendo un problema diferente ... el que se supone que está oculto inicialmente ... se muestra desde el principio. Como si no pudiera encontrar la definición para la clase ''modal'' ... sospecho que la guía de instalación de ember-cli-bootstrap-sassy no está completa. Alguien sabe cómo hacerlo bien?

Gracias, Raka

Answer 1

De acuerdo,

Seguí la sugerencia más básica de la guía ember-cli aquí: http://www.ember-cli.com/asset-compilation/ :

bower install bootstrap --save

En Brocfile.js, agregue lo siguiente:

app.import(''bower_components/bootstrap/dist/css/bootstrap.css'');

La guía olvidó mencionar que es importante poner esto también en el Brocfile.js:

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

Con eso, ahora tengo mi diálogo modal (boostrap) en mi aplicación Ember.