jQuery: fadeIn/Để và slideDown yếu tố mới

Question

Đây là một dòng mã tôi sử dụng để thúc đẩy một hàng mới vào container của tôi:

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

đâu item là một mô hình Backbone.js, render() tạo và/hoặc sửa đổi đối tượng và el là phần tử html. (Đối tượng không bao giờ được hiển thị cho đến khi hiển thị xong)

Làm cách nào để giữ ** new ItemView(item).render() ** và lưu nó trong một biến, sau đó mờ dần và trượt vào (dưới cùng) của vùng chứa của tôi?

Sửa

Hãy ghi nhớ rằng this.$el là yếu tố container.

Answer 1

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

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

Answer 2

Đặt thuộc tính thành kiểu phần tử = "display: none;" vì vậy khi bạn nối nó, nó sẽ không hiển thị. Sau đó, sau khi thêm hàm exec fadein và phần tử của bạn sẽ hiển thị.

Tôi hy vọng điều này sẽ hữu ích.

Answer 3

Theo tôi, vấn đề là có phương thức hiển thị của chế độ xem trả về chế độ xem.

xem của bạn có thể trông giống như sau:

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;   

     } 
    }); 

Sau đó, ở đâu đó bạn có một phương pháp tạo ra các quan điểm và gắn nó vào DOM.

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

Vấn đề là render() phải được gọi để truy cập vào các phần tử của cái nhìn ... nghĩ về điều này, khi một sự thay đổi được thực hiện trên mô hình quan điểm là sẽ làm một lần nữa. Điều này có nghĩa là nếu bạn muốn thêm bất kỳ hiệu ứng chuyển tiếp nào như mờ dần hoặc trượt khả năng bạn sẽ thêm chúng vào phương thức hiển thị của chế độ xem.

Thêm một số hiệu ứng vào phương thức hiển thị chế độ xem.

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;   

     } 
    }); 

Công trình này, mọi thay đổi đối với mô hình sẽ làm cho chế độ xem hiển thị và chúng tôi sẽ thấy hiệu ứng trượt xuống. Nhưng chỉ vì chế độ xem đã được thêm vào DOM! VẤN ĐỀ, chúng tôi nhận thấy rằng hiệu ứng slideDown không xảy ra khi tải trang. Vì vậy, dưới dạng bản vá, chúng tôi sao chép hiệu ứng ở nơi chúng tôi đang tạo chế độ xem và thêm nó vào DOM.

Lý do tại sao hiệu ứng không xảy ra khi tải trang là do hiệu ứng đã xảy ra trước khi chúng tôi thêm phần tử của chế độ xem vào DOM.

Nhưng tại sao lại sao chép hiệu ứng, tôi có ý nghĩa khi thay đổi chế độ xem một chút.

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. 

     } 
    }); 

Tạo quan điểm và gắn nó vào 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

này cũng xuất hiện để làm việc

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