jQuery: FadeIn / To и SlideDown новый элемент

Question

Вот одна строка кода, которую я использую для добавления новой строки в мой контейнер:

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

Где item - модель Backbone.js , render() создает и / или изменяет объект, а el - элемент html. (Объект никогда не отображается до завершения рендеринга)

Как мне сохранить ** new ItemView(item).render() ** и сохранить его в переменной, затем исчезнуть и вставить его (в нижнюю часть) моего контейнера?

Редактировать

Имейте в виду, что this.$el является элементом контейнера.

Answer 1

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

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

Answer 2

Установить атрибут для вашего элемента style = "display: none;" поэтому, когда вы добавите его, он не будет виден. Затем после добавления функции exec fadein и ваш элемент будет виден.

Надеюсь, это поможет.

Answer 3

Это также, кажется, работает

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

Answer 4

По моему мнению, проблема в том, что метод визуализации представления возвращает представление.

Ваше представление, вероятно, выглядит примерно так:

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;          

       }  
    });

Тогда где-то у вас есть метод, который создаетпредставление и присоединяет его к DOM.

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

Проблема в том, что render () должен быть вызван для получения доступа к элементу представления ... Подумайте об этом, когда в модель будут внесены изменения.представление будет отображаться снова.Это означает, что если вы хотите добавить какие-либо эффекты перехода, такие как затухание или скольжение, вы, вероятно, собираетесь добавить их в метод визуализации представления.

Добавьте некоторые эффекты в метод визуализации представлений.

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;          

       }  
    });

Это работает, любое изменение модели вызовет рендеринг вида, и мы увидим эффект скольжения вниз.Но только потому, что представление уже добавлено в DOM !!!ПРОБЛЕМА, мы замечаем, что эффект slideDown не возникает при загрузке страницы.Итак, как патч, мы дублируем эффект в том месте, где мы создаем представление и добавляем его в DOM.

Причина, по которой эффект не возникает при загрузке страницы, заключается в том, что эффект уже произошелпрежде чем мы добавим элемент представления в DOM.

Но зачем дублировать эффект, имеет смысл немного изменить представление.

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. 

       }  
    });

Создайте представление и добавьте егов ДОМ

 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 !!