böyle temelde gider omurga içerisine bir hale yöntemine sahip yöntem

Question

işlemek bir omurga içerisine bir jQuery eklentisi çağrılması: Bir yönlendirici eylemden denir

render: function() { 
    $.tmpl(this.template, attrs).appendTo(this.el); 
    return this; 
}, 

: Artık

action: function() { 
    $('#container').empty(); 
    $('#container').append(myView.render().el); 
}, 

, ben Bu görünümde label öğelerine bir eklenti uygulamak istiyorum.

render: function() { 
    $.tmpl(this.template, attrs).appendTo(this.el); 
    this.$('label').inFieldLabels(); 
    return this; 
}, 

ama bu (I eleman henüz DOM eklenmemiş çünkü bu olduğunu varsayarak yaşıyorum) çalışmaz: İlk düşüncem render içindeki eklenti aramak oldu.

action: function() { 
    $('#container').empty(); 
    $('#container').append(myView.render().el); 
    myView.$('label').inFieldLabels(); 
}, 

Doğrusu bunu istiyorum eklentisi görüntüsü değil, yönlendirici bir parçası olduğu için yapmaz bu nedenle,: Ama yönlendirici eylem eklentisi diyoruz eğer çalışır eylemin içinde onu aramak anlamında. Bunu yapmanın daha iyi bir yolu var mı?

Answer 1

Görünümümün bir loadPlugins yöntemini ekleyerek bu sorunu çözdüm, bu yüzden eylemi gerçekleştirdikten sonra myView.loadPlugins() yapabilirim. İdeal değil, ama işe yarıyor.

---

Düzenleme: Eh, heard from the horse's mouth ettik ve ben eleman DOM eklendiğinden önce eklentiyi uygulayamazsınız gibi görünüyor, bu yüzden ya ben (loadPlugins birlikte) yukarıdaki gibi yapabilir ya da ben Kodu değiştirebilir, böylece öğe render yönteminde DOM'a eklenir. Umarım bu, benzer bir pozisyonda birine yardımcı olur. İşte

ben şimdi yapıyorum nasıl:

//in router 
action: function() { 
    var myView = new MyView({ 
    el: '#container' 
    }); 
} 

//in view 
render: function() { 
    $.tmpl(this.template, attrs).appendTo(this.el); //this now appends to the DOM 
    this.loadPlugins(); 
    return this; 
}, 

loadPlugins: function() { 
    this.$('label').inFieldLabels(); 
    //and other plugins 
}, 

Answer 2

Beter bunu şu şekilde yapın:

action: function() { 
    var container = $('#container'); 

    container.empty(); 
    myView.render(container); 
}, 

render: function (container) { 
    $(this.el) 
     .append($.tmpl(this.template, attrs)) 
     .appendTo(container); 
    $('label', this.el).inFieldLabels(); 
    return this; 
}, 

Answer 3

Hatta yukarıdaki çözümler benzer bir sorunla karşı karşıya ama benim durumumda oldu olmaz iş, ana görünümler henüz DOM'a eklenmemiş olduğundan.

Ebeveyn görünümüne sahip olma kuralına uymak, çocukları DOM'a ekler, render yönteminde loadPlugins() yapmak işe yaramadı.

Yaptığım şey budur. zaman aşımı işlevi alır, böylece bitirmek için geçerli çağrı yığını

render: function() { 
    var self = this; 

    setTimeout(function() { 
    $(self.el).setupPlugin(); 
    }, 0); 

    return this; 
} 

0 bir setTimeout kullanarak sağlar: Bu nasıl hiyerarşisinde görüşlerinizi yönetiyorsanız bağlı hacky tür hissediyor ama yardımcı olabilecek görünümü çağırdı ve tüm ebeveynler DOM'a eklendi. (Yukarıda belirtilen kurala sadık kalırsanız).

Answer 4

jQuery Tools Tooltip eklentisini ayarlayan benzer bir sorunla karşılaştım. Ama iyi çalışan çok farklı bir yaklaşım vardı: görüşte özel bir olayı tetiklemek. Bildiğim kadarıyla, omurgaya yerleştirilmiş 'dom'a yerleştirilmiş' bir olay yok, ben de bunu kendim yaptım.Ben bir yönlendirici kullanmanız yok ama yukarıda modifiye kodu şöyle görünecektir:

// In the router: 
action: function() { 
    var container = $('#container'); 

    container.append(myView.render().el)); 
    myView.trigger('rendered'); 
}, 

// In the view: 
initialize: function() { 
    this.bind('rendered', this.afterRender, this); 
}, 
render: function (container) { 
    $(this.el).append($.tmpl(this.template, attrs)) 
    return this; 
}, 
afterRender: function() { 
    $('label', this.el).inFieldLabels(); 
} 

Ben avantajı görünümü onun kabın cahil kalmasını olduğunu varsayalım. Dezavantajı, ekstra bir satır veya iki kod gibi olmasıdır. Ancak, çok fazla eklenti kurmanız veya öğenin DOM içinde olmasını gerektiren daha fazla şey yapmanız gerekiyorsa, iyi çalışır (ve mantıksal olarak ayrılır).

Aslında @ Skilldrick'in kapsayıcıyı görüntüye geçirme yöntemini seviyorum, ancak yine de, ebeveyn görünümünün çocukların yerleştirilmesinden sorumlu olmasının mantıklı olduğunu hissediyorum. Ben Backbone için yeniyim, lütfen yorum yapmaktan çekinmeyin. Böylece kodunu değiştirmek" ile esasen demek istiyorum -

render: function() { 
    $(this.el).html(this.template(this.model.toJSON())); 
    $('#email1dropdown', this.el).dropdownify(); 

    return this; 
}, 

Answer 5

Ben işlemek işlevinde jQuery için bağlam belirterek sadece benim jQuery eklentisi için çalışmak üzere bu elde edebildi öğe "render" yönteminde DOM'a eklenir. Bu arada, '$' ('label', this.el) `için kestirme olan bu '$' ('label')` dır.