2012-04-06 11 views
8

Me gustaría incorporar efectos jQuery (fadeIn, fadeOut, etc ...) en partes de mis plantillas de manillar. Creo que esto se puede lograr más o menos con una vista separada en la que la propiedad isVisible de la vista es inicialmente falsa y su método didInsertElement se llama algo así como this.$().fadeIn().Ember Views, Handlebars y jQuery Effects

Sin embargo, lo que me gustaría hacer es agregar un efecto jQuery a una pequeña parte de una vista, es decir, para mostrar un pequeño bloque de contenido que inicialmente está oculto por una declaración {{#if}} que evalúa a false y más tarde a través de los comentarios de los usuarios se cambia al true. Vea el siguiente http://jsfiddle.net/YeGbF/2/.

¿Alguna sugerencia?

+3

Solo una pista: puede usar 'toggleProperty' en lugar de' set ('x',! Get ('x')) '... –

+0

Lo agradezco. No puedo creer que nunca lo haya notado antes en Ember.Observable. – mike

+0

También hay 'incrementProperty' y' decrementProperty' en 'Ember.Observable', ver http://code418.com/blog/2012/03/31/useful-observable-functions/ – pangratz

Respuesta

14

Se podría utilizar una vista para la materia de la cual se muestren desvaneció en, ver http://jsfiddle.net/pangratz666/dJMwC/

Manillar:

{{#view App.FadeInView contentBinding="this"}} 
    <div>{{content.someAdditionalDetail}}</div> 
{{/view}} 

JavaScript:

App.FadeInView = Ember.View.extend({ 
    didInsertElement: function(){ 
     this.$().hide().show('slow'); 
    } 
}); 

tienen también una mira Deferring removal of a view so it can be animated

+0

Gracias. Esto funciona. – mike