JQuery: FadeIn/К и 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

На мой взгляд, проблема заключается в том, что метод рендеринга представления возвращает представление.

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

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); 

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

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

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. 

     } 
    }); 

Создайте вид и добавить его в 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

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

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