Cómo ejecutar algunos JS en un elemento en la plantilla de índice en Ember.js RC2

Estoy escribiendo una aplicación Ember.js, y me gustaría ejecutar el siguiente código Javascript en un div con una clase de navbar de navbar justo después de que se visualice la vista:

 $('.navbar').affix({offset: -1000}); 

No conozco ninguna forma de hacer esto fácilmente en Ember, ya que el estándar JQuery $(document).ready() no funciona con las aplicaciones Ember. Tiene que haber alguna forma fácil de hacerlo, pero todas las otras respuestas a esta pregunta parecen ser soluciones complejas y se basan en versiones obsoletas de Ember.js.

Plantilla en cuestión:

   {{outlet}}  

Supongo que te refieres a la plantilla de tu ApplicationView cuando hablas de la ‘plantilla de índice’:

 App.ApplicationView = Ember.View.extend({ didInsertElement : function(){ var that = this; Ember.run.next(function(){ that.$('.navbar').affix({offset: -1000}); }); } }); 

¿Cuáles son los ingredientes de esta solución?

  1. El elemento didInsertElement de una vista es el lugar correcto para poner la lógica de inicialización del complemento jQuery y jQuery.
  2. El gancho didInsertElement se didInsertElement cuando se ha insertado el elemento DOM de su vista, pero los elementos internos aún no se han insertado . Por lo tanto, envolví tu lógica en una llamada a Ember.run.next() . Esta llamada asegura que la lógica se ejecuta después de que su vista se haya procesado por completo, porque se ejecuta al final del Ember Run Loop , que es responsable de sincronizar los cambios necesarios con el DOM.

Actualización: Una solución aún mejor propuesta por Thomas para disminuir la demora entre el renderizado y la lógica JS que se está ejecutando:

 App.ApplicationView = Ember.View.extend({ didInsertElement : function(){ var that = this; Ember.run.schedule('afterRender',function(){ that.$('.navbar').affix({offset: -1000}); }); } }); 

Problema con la primera solución según OP:

¿Hay alguna forma de disminuir el desfase entre el momento en que se renderiza el elemento y cuándo se ejecuta JQuery, o simplemente no es posible? Se ve raro cuando los elementos cambian en vivo después de que se renderiza la plantilla.

De acuerdo con Thomas:

He usado tanto el siguiente como el progtwig para ejecutar jquery en mi propia aplicación y la demora que Brad menciona es significativamente menor a inexistente con el calendario

Lectura adicional para los interesados ​​en el gran concepto de Ember Run Loop: http://alexmatchneer.com/blog/2013/01/12/everything-younever-wanted-to-know-about-the-ember- ciclo de ejecución /

Mis suposiciones:

  • Ese código es lo único en su página HTML (junto con su JavaScript incluido).
  • Este es el único código en su archivo JavaScript:

    App = Ember.Application.create ();

Si esas dos suposiciones son correctas, entonces no está trabajando con la plantilla de índice, en realidad está trabajando con la plantilla de la aplicación. Cada vista tiene una función init. Lo más simple que puede hacer es anular esa función de la siguiente manera:

 App.ApplicationView = Ember.View.extend({ init: function(){ this._super(); alert('do something here'); } }); 

Aquí hay un violín para que lo revises .