jQuery: FadeIn/A e slideDown nuovo elemento

Question

Ecco l'una riga di codice che uso per spingere una nuova riga al mio contenitore:

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

Dove item è un modello Backbone.js, render() crea e/o modifica l'oggetto e el è l'elemento html. (L'oggetto non viene mai visualizzato fino al completamento del rendering)

Come è possibile mantenere ** new ItemView(item).render() ** e memorizzarlo in una variabile, quindi svanire e farlo scorrere nella parte inferiore del contenitore?

Modifica

Si prega di tenere presente che this.$el è l'elemento contenitore.

Answer 1

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

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

Answer 2

Imposta attributo al tuo elemento style = "display: none;" quindi quando lo aggiungi non sarà visibile. Quindi aggiungi la funzione exec fadein e il tuo elemento sarà visibile.

Spero che questo aiuti.

Answer 3

A mio parere, il problema è che il metodo di rendering della vista restituisce la vista.

tuo punto di vista, probabilmente simile a questa:

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;   

     } 
    }); 

poi da qualche parte si dispone di un metodo che crea la vista e lo collega al DOM.

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

Il problema è che render() deve essere chiamato per ottenere l'accesso alla elemento della vista ... pensare a questo, quando viene apportata una modifica sul modello della vista sta andando a rendere di nuovo. Ciò significa che se si desidera aggiungere effetti di transizione come dissolvenza o scorrimento, è probabile che vengano aggiunti al metodo di rendering della vista.

Aggiungere alcuni effetti nel metodo di rendering delle viste.

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;   

     } 
    }); 

Questo funziona, qualsiasi modifica al modello causerà il rendering della vista e vedremo l'effetto di scorrimento verso il basso. Ma solo perché la vista è già stata aggiunta al DOM !!! IL PROBLEMA, notiamo che l'effetto slideDown non si verifica al caricamento della pagina. Quindi, come patch, duplichiamo l'effetto nel punto in cui stiamo creando la vista e aggiungendola al DOM.

Il motivo per cui l'effetto non si verifica al caricamento della pagina è perché l'effetto è già avvenuto prima di aggiungere l'elemento della vista al DOM.

Ma perché duplicare l'effetto, ha senso per me cambiare leggermente la visualizzazione.

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. 

     } 
    }); 

creare la vista e aggiungerlo al 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

Questo sembra anche funzionare

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