Trong backbone.js làm cách nào để liên kết khóa với tài liệu

Question

Tôi đã theo dõi cùng với hướng dẫn Railscast về backbone.js và tôi muốn mở rộng chức năng bao gồm điều khiển bàn phím. Tôi thêm vào phần sau đây để xem chương trình của tôi:

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 

Trong chương trình mẫu của tôi, tôi đã điều sau đây:

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

Nếu tôi chọn liên kết lại bằng cách sử dụng phím tab, sau đó bắt đầu đánh phím ngẫu nhiên tôi nhận được đầu ra trong giao diện điều khiển javascript của tôi. Tuy nhiên nếu tôi tải trang và không chọn liên kết và chỉ bắt đầu nhấn phím, tôi sẽ không nhận được kết quả đầu ra trong bảng điều khiển của mình.

Làm cách nào để liên kết sự kiện với tài liệu để nó sẽ nghe mọi phím được nhấn khi tải màn hình?

Answer 1

Bạn sẽ cần phải làm việc xung quanh phạm vi của xương sống cho các chế độ xem. khi bạn đang làm một cái gì đó như thế này:

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

bạn đang ràng buộc chức năng goBack mình vào sự kiện KeyUp lớn lên trên yếu tố container lại nhìn của bạn. (Theo mặc định div trong đó quan điểm được hiển thị)

thay vì làm điều đó, nếu bạn muốn để ràng buộc vào một cái gì đó bên ngoài tầm nhìn của bạn (mà không có nó là điểm riêng! (*))

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; 
    } 

}); 

(*) nhận xét như đánh dấu ở trên, bạn tốt nhất làm được điều này chỉ khi mục mà bạn muốn liên kết với không có nó là điểm riêng, nếu bạn có một cái nhìn cho trang đầy đủ của bạn (độ xem ứng dụng hoặc một cái gì đó như rằng) bạn có thể ràng buộc khóa trong đó, và chỉ cần nâng cao một sự kiện App.trigger('keypressed', e); chẳng hạn.

khi đó bạn có thể ở chế độ xem Xuất cảnh, liên kết với sự kiện keypressed của ứng dụng đó.

App.bind('keypressed', goBack); 

hãy nhớ rằng bạn nên làm điều gì đó như một sự kiện bị trì hoãn hoặc tổ hợp phím với nhau trong một số trường hợp, có thể là một hit hiệu suất lớn. đặc biệt là trên các trình duyệt cũ hơn.

Answer 2

Sự kiện của bạn sẽ được đưa vào phần tử chế độ xem @el. Để nắm bắt các sự kiện trên document, bạn phải tự cuộn mình:

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

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

Nên thực hiện thủ thuật.