Backbone.js'de backbone.js'nin bir Railscast öğreticisi ile birlikte izlediğim

Question

belgesine bir anahtarlı bağ kurarım ve işlevselliği klavye denetimini içermek üzere genişletmek istedim. şovum şablonuna On

class Raffler.Views.EntryShow extends Backbone.View 
    template: JST['entries/show'] 

    events: 
    'click .back': 'showListing' 
    'keyup': 'goBack' 

    showListing: -> 
    Backbone.history.navigate("/", trigger: true) 

    goBack: (e) -> 
    console.log e.type, e.keyCode 

    render: -> 
    $(@el).html(@template(entry: @model)) 
    this 

Ben şu var: Ben sekme tuşunu kullanarak geri bağlantı seçerseniz

<a href="#" class="back">Back</a> 
<%= @entry.get('name') %></td> 

, o zaman olsun rastgele tuşlara basarak başlamak benim gösteri görünümüne aşağıdaki eklendi javascript konsolumdaki çıktı. Ancak sayfayı yüklerim ve bağlantıyı seçmezsem ve sadece tuşlara basmaya başlarsam konsolumda çıktı olmaz.

Olayı belgeye nasıl bağlarım? Ekranı yüklerken basılan herhangi bir tuşun dinlenmesini sağlar?

Answer 1

Görünümler için omurganın kapsamı etrafında çalışmanız gerekir. zaman böyle bir şey yapıyorlar:

events: 
    'click .back': 'showListing' 
    'keyup': 'goBack' 

size bakış kapsayıcınız elemanı üzerinde yükseltilmiş keyup olayı için goBack fonksiyonunu bağlayıcı niteliktedir.

() kendi manzara yok ( ! *) Eğer görüntülemek dışında bir şeye bağlamak istiyorsanız, bunun yerine yapmanın

(varsayılan olarak div hangi görünümü oluşturulur)

Raffler.Views.EntryShow = Backbone.View.extend({ 
    template: JST['entries/show'], 

    events: { 
    'click .back': 'showListing' 
    }, 

    initialize: function() { 
    $('body').keyup(this.goBack); 
    }, 

    showListing: function() { 
    Backbone.history.navigate("/", trigger: true); 
    }, 

    goBack: function (e) { 
    console.log e.type, e.keyCode; 
    }, 

    render: function() { 
    $(this.el).html(this.template(entry: @model)); 
    return this; 
    } 

}); 

(*), yukarıda belirtilen uygun sözler sizi tam bağlamak istediğiniz öğe size tam sayfa (uygulama görünümü falan gibi bir görünüm varsa, kendi manzara yok sadece bunu Buradaki anahtarlığı bağlayabilir ve örneğin bir olayı App.trigger('keypressed', e); açabilirsiniz.

, EntryShow görünümünüzde bu uygulamanın keypressed etkinliğine bağlayabilirsiniz.

App.bind('keypressed', goBack); 

Eğer gecikmiş bir olay olarak bir şeyler yapmak gerektiğini akılda tutmak veya gruplama, bazı durumlarda bir araya basılmasını vücutta olur her tuşa basma ateş gibi büyük bir performans isabet olabilir. özellikle eski tarayıcılarda.

Answer 2

Etkinlikleriniz, görünüm öğeniz @el kapsamına alınacaktır. document etkinlikleri yakalamak için bunu kendin rulo zorunda:

initialize: -> 
    $(document).on "keyup", @goBack 

remove: -> 
    $(document).off "keyup", @goBack 

hile yapalım mı.