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

在我看来，问题在于让视图的渲染方法返回视图。

你的视图可能看起来像这样：

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 中了！！！问题是，我们注意到页面加载时不会发生幻灯片效果。因此，作为补丁，我们在创建视图并将其附加到 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());