Sự kiện đường trục có ký tự đại diện

Question

Có cách nào để nghe tất cả các sự kiện của không gian tên. Vì vậy, khi tôi nghe một sự kiện như thế này:

app.vent.on('notification(:id)', function(type){console.lof(type)}) 

Nó sẽ lắng nghe tất cả các sự kiện thích này:

app.vent.trigger('notification:info') 
app.vent.trigger('notification:error') 
app.vent.trigger('notification:success') 

Answer 1

số Backbone thường bắn một eventName sự kiện nói chung, cũng như eventName:specifier sự kiện. Một ví dụ của việc này là Model.change, cho phép bạn nghe tất cả thay đổi, cũng như thay đổi các lĩnh vực cá nhân:

model.on('change', this.onAnyPropertyChanged); 
model.on('change:name', this.onNamePropertyChanged); 

Tiếp theo mô hình này trong mã của bạn, bạn có thể kích hoạt sự kiện của bạn như sau:

app.vent.trigger('notification', 'info'); 
app.vent.trigger('notification:info'); 

Và lắng nghe những sự kiện chung:

app.vent.on('notification', function(type){ 
    console.log(type); //-> "info" 
}); 

Answer 2

Như đã đề cập bởi in this answer nó không thể lắng nghe các sự kiện với các kí hiệu. Nhưng khi bạn có thể nghe all này sẽ làm việc:

vent.on('all', function(evenName, options) { 
    var type = evenName.split(/notification:/)[1]; 
    if (type) { 
    console.log(type, options); 
    } 
}); 

Answer 3

Cảnh báo: Nghe đến không gian tên sự kiện trên các sự kiện tùy chỉnh có thể không hoạt động nữa. Ví dụ, điều này không công việc:

@listenTo @app, 'session', -> console.log ".listenTo `session` triggered" 
    @listenTo @app, 'session:login_success', -> console.log ".listenTo `session:login_success` triggered" 

    @app.on 'session', -> console.log ".on `session` triggered" 
    @app.on 'session:login_success', -> console.log ".on `session:login_success` triggered" 

Nếu tôi kích hoạt 'phiên: login_success' trên @app, chỉ có hai sự kiện cụ thể lửa, không phải là không gian tên một.

liên quan vấn đề github: https://github.com/documentcloud/backbone/issues/2558

Answer 4

Tôi đã viết helper này:

export default class EventsHelper { 
    static triggerNamespacedEvent(eventBus, event, args) { 
    event.split(':').reduce((previous, current) => { 
     eventBus.trigger(previous, current); 
     return `${previous}:${current}`; 
    }); 
    eventBus.trigger(event, args); 
    } 
} 

Để sử dụng này theo quan điểm của bạn, bạn sẽ làm gì:

actionOne(argsOne){ 
    EventsHelper.triggerNamespacedEvent(this, 'click:chart:one', argsOne); 
} 

actionTwo(argsTwo){ 
    EventsHelper.triggerNamespacedEvent(this, 'click:chart:two', argsTwo); 
} 

Để nghe cho các sự kiện mà bạn sẽ làm:

//Listen for all clicks 
this.listenTo(view, 'click', (args) => { 
    console.log(`clicked something: ${args}`); //output: clicked something: chart 
}); 

//Listen for all chart clicks 
this.listenTo(view, 'click:chart', (args) => { 
    console.log(`clicked chart: ${args}`); //output: clicked chart: one 
}); 

//Listen for fully qualified event 
this.listenTo(view, 'click:chart:two', (args) => { 
    console.log(`clicked chart two: ${args}`); //output: clicked chart two: evtArgs 
});