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

将属性设置为元素样式=“display：none;”因此，当你追加它时，它是不可见的。然后在添加exec fadein函数后，您的元素将可见。

我认为这有帮助。

Answer 3

在我看来，问题在于让视图的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);   

          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. 

       }  
    });

创建视图并将其附加到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());

jQuery：FadeIn / To和SlideDown新元素

4 个答案: