backbone.js: đặt trọng tâm vào đầu vào sau khi hiển thị

Question

Tôi có Mô hình có 1 đầu vào. Ngoài ra, tôi có một Bộ sưu tập. Bây giờ, khi tôi thêm một mô hình vào bộ sưu tập, tôi muốn đặt trọng tâm cho đầu vào của nó. Để chính xác, tôi cần đặt trọng tâm vào đầu vào của chế độ xem mô hình mới được tạo.

Tuy nhiên, tôi dường như không làm cho nó hoạt động. Dưới đây là chức năng của tôi có thêm quan điểm của mô hình để xem bộ sưu tập:

addOne: function(InvoiceItem) { 
    var view = new InvoiceItemView({model: InvoiceItem}); 
    this.$('tr[data-id="'+InvoiceItem.get('after')+'"]').after(view.render().el); 
    this.$('tr[data-id="'+InvoiceItem.cid+'"]').css('background', 'green'); 
    this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus(); 
}, 

Vấn đề là, cuộc gọi thứ ba: this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus(); không làm gì cả. Và đó là lạ, bởi vì có vẻ như tôi chỉ có thể thực hiện thao tác DOM trên phần tử gốc tr và không có gì khác ngoài điều đó. Có vẻ như với tôi rằng jQuery không biết rằng các yếu tố tồn tại, đó là lạ, bởi vì khi tôi làm alert(this.$('tr[data-id="'+InvoiceItem.cid+'"] input').length) Tôi nhận được 1, cho biết rằng các yếu tố tồn tại.

Tôi đang làm gì sai ở đây?

Answer 1

Sử dụng _.defer cố định vấn đề của tôi:

var $this = this; 
_.defer(function(){ 
    $this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus(); 
}); 

Answer 2

Thay vì this.$('tr[data-id="'+InvoiceItem.cid+'"] input').focus();

thử này

$(view.render().el).find('input').focus(); 

Answer 3

Tôi đã có một vấn đề rất giống như của bạn và kết thúc ở đây trong khi tìm kiếm một giải pháp. Bài đăng của bạn đã được vài tháng trước, do đó bạn có thể đã chuyển qua quá trình này, nhưng hy vọng điều này sẽ giúp người khác. Tôi đã có thể giải quyết vấn đề bằng cách sử dụng jQuery's ready function handler. Tôi luôn nghĩ rằng nó chỉ có thể được sử dụng trên document nhưng bạn cũng có thể sử dụng nó trên các subnodes. Hãy thử điều này:

addOne: function(InvoiceItem) { 
    var view = new InvoiceItemView({model: InvoiceItem}); 
    $('tr[data-id="'+InvoiceItem.get('after')+'"]').ready(function(){ 
     $('tr[data-id="'+InvoiceItem.cid+'"]').css('background', 'green'); 
     $('tr[data-id="'+InvoiceItem.cid+'"] input').focus(); 
    }); 
    $('tr[data-id="'+InvoiceItem.get('after')+'"]').after(view.render().el); 
},