jQuery的：淡入/要和了slideDown新元素

下面是一行代碼我用推新行到我的容器：jQuery的：淡入/要和了slideDown新元素

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

凡item是Backbone.js模型，render()創建和/或修改該對象和el是html元素。（直到渲染完成後纔會顯示該對象）

如何保存** new ItemView(item).render() **並將其存儲在一個變量中，然後淡入並將其滑入容器的底部？

編輯

請記住，this.$el是容器元素。

來源

2012-02-14 Brian Graham

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

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

來源

2012-02-14 16:02:32

感謝您的快速修復，這完美的作品。 – 2012-02-14 16:12:56

我不得不做一些不同的事情，但是謝謝你讓我看到了@Linus。 – sehummel 2013-02-06 23:15:17

像一個魅力工作 – 2013-07-26 02:49:19

將屬性設置爲你的元素style =「display：none;」所以當你追加它時它不會被看見。然後添加執行淡入淡出功能後，您的元素將可見。

我hopt這有助於。

來源

2012-02-14 16:03:42

有一個如何做到這一點的例子？ – 2012-02-14 16:06:43

謝謝。這就是我需要的。 – MikeSchinkel 2013-07-15 19:45:15

在我看來，問題是具有視圖的渲染方法返回的視圖。

你的看法可能看起來是這樣的：

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

來源

2013-07-27 22:08:27 MageNewbie

這也似乎工作

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

來源

2015-03-06 22:51:40 user2104598

jQuery的：淡入/要和了slideDown新元素

回答

相關問題