jQuery: FadeIn/A y slideDown nuevo elemento

Question

Aquí está la línea de código que utilizo para impulsar una nueva fila a mi contenedor:

this.$el.append(new ItemView(item).render().el); 

Dónde item es un modelo Backbone.js, render() crea y/o modifica el objeto y el es el elemento html. (El objeto nunca se muestra hasta que se complete la representación)

¿Cómo puedo mantener ** new ItemView(item).render() ** y almacenarlo en una variable, luego fundirlo y deslizarlo en (la parte inferior) de mi contenedor?

Editar

Por favor, tenga en cuenta que this.$el es el elemento contenedor.

Answer 1

var rendered = new ItemView(item).render(); 

$(rendered.el).appendTo(this.$el).hide().fadeIn().slideDown(); 

Answer 2

Establezca el atributo en su elemento style = "display: none;" entonces, cuando lo anexes, no será visible. Luego, después de agregar la función fadein de exec, su elemento estará visible.

Espero que esto ayude.

Answer 3

En mi opinión, el problema es hacer que el método de renderización de la vista devuelva la vista.

Su punto de vista, probablemente, se ve algo como esto:

var Someview = Backbone.View.extend({ 

     initialize: function() { 

      this.template = _.template($("#someview-template")); 

      this.model.on('change', this.render()); 

     }, 
     render: function() { 

      var html = this.template(this.model);  

      this.$el.html(html); 

      return this;   

     } 
    }); 

Entonces en algún lugar que tiene un método que crea la vista y lo adjunta a la DOM.

var $main = $('#main'); //main area in the DOM eg: <div id="main"></div> 
$main.append(new Somveview({model: item}).render().$el); 

El problema es que render() debe ser llamado para tener acceso a un elemento de la vista ... pienso en esto, cuando se realiza un cambio en el modelo de la vista se va a hacer de nuevo. Esto significa que si desea agregar efectos de transición como desvanecimiento o deslizamiento, es probable que los agregue al método de visualización de la vista.

Agregue algunos efectos al método de representación de vistas.

var Someview = Backbone.View.extend({ 

     initialize: function() { 

      this.template = _.template($("#someview-template")); 

      this.model.on('change', this.render()); 

     }, 
     render: function() { 

      var html = this.template(this.model);  

      this.$el.html(html).hide().slideDown(600); 

      return this;   

     } 
    }); 

Esto funciona, cualquier cambio en el modelo provocará que la vista para hacer y vamos a ver el efecto de deslizamiento hacia abajo. ¡Pero solo porque la vista ya se ha anexado al DOM! EL PROBLEMA, notamos que el efecto slideDown no ocurre en la carga de la página. Entonces, como un parche, duplicamos el efecto en el lugar donde creamos la vista y la anexamos al DOM.

El motivo por el que el efecto no se produce en la carga de la página se debe a que el efecto ya se ha producido antes de agregar el elemento de la vista al DOM.

Pero por qué duplicar el efecto, tiene sentido para mí cambiar un poco la vista.

var Someview = Backbone.View.extend({ 

     initialize: function() { 

      this.template = _.template($("#someview-template")); 

      this.model.on('change', this.render()); 

     }, 
     render: function() { 

      var html = this.template(this.model);  

      this.$el.html(html); 

      //no longer returning the views object from the render method. 

     } 
    }); 

crear la vista y lo añaden a la DOM

var $main = $('#main'); //main area in the DOM eg: <div id="main"></div> 
var someview = new Somveview({model: item}); //create the view 
$main.append(someview.$el); // add the view's element to the DOM 
someview.render(); // Rendering after we have appended to the DOM !! 

Answer 4

Esto también parece funcionar

this.$el.append($(new ItemView(item).render().el).hide().fadeIn());