jQuery: FadeIn/Do i SlideDown nowego elementu

Question

Oto jeden wiersz kodu używam do pchania nowy wiersz do mojego kontenera:

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

Gdzie item jest Backbone.js model render() tworzy i/lub modyfikuje obiekt i el jest elementem html. (Obiekt nigdy nie jest wyświetlany, dopóki renderowanie nie zostanie zakończone)

Jak mogę zachować ** new ItemView(item).render() ** i zapisać w zmiennej, a następnie zaniknąć i wsunąć (do dołu) mojego pojemnika?

Edit

Proszę pamiętać, że jest to element this.$el pojemnik.

Answer 1

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

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

Answer 2

Ustaw atrybut na swój styl elementu = "display: none;" więc kiedy go dodasz, nie będzie to widoczne. Następnie po dodaniu funkcji exec fadein, twój element będzie widoczny.

Mam nadzieję, że to pomoże.

Answer 3

Moim zdaniem problem polega na tym, że metoda renderowania widoku zwraca widok.

Państwa zdanie prawdopodobnie wygląda mniej więcej tak:

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;   

     } 
    }); 

Potem gdzieś masz metodę, która tworzy widok i przywiązuje go do DOM.

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

Problemem jest to, że render() musi być wywołana, aby uzyskać dostęp do elementu widoku za ... Pomyśl o tym, kiedy dokonywana jest zmiana modelu widok ma zamiar ponownie render. Oznacza to, że jeśli chcesz dodać efekty przejścia, takie jak zanikanie lub przesuwanie, prawdopodobnie dodasz je w metodzie renderowania widoku.

Dodaj niektóre efekty do metody renderowania widoków.

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;   

     } 
    }); 

To działa, każda zmiana modelu spowoduje renderowanie widoku i zobaczymy efekt ześlizgnięcia. Ale tylko dlatego, że widok został już dołączony do DOM !!! PROBLEM, zauważamy, że efekt slideDown nie występuje przy ładowaniu strony. Tak więc, jako poprawkę, duplikujemy efekt w miejscu, w którym tworzymy widok i dołączamy go do DOM.

Powodem, dla którego efekt nie występuje przy ładowaniu strony, jest fakt, że efekt już się wydarzył przed dołączeniem elementu widoku do DOM.

Ale dlaczego powielić efekt, to ma sens, aby zmienić trochę widok.

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. 

     } 
    }); 

Tworzenie widoku i dołączyć go do 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

To również wydaje się działać

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