Tôi đã triển khai giải pháp cho một vấn đề tương tự như sau. Trước tiên, tôi đã viết một phương pháp mới ngay vào nguyên mẫu Marionette.View:
Marionette.View.prototype.bubbleMethod = function() {
var args = _.toArray(arguments)
var event = args.shift()
var bubble = event + ':bubble'
this.triggerMethod.apply(this, [ event ].concat(args))
this.triggerMethod.apply(this, [ bubble ].concat(args))
}
Đó sẽ gọi thường xuyên triggerMethod
từ rối hai lần: một lần với tên sự kiện của bạn vì nó được thiết kế để được xử lý, và một thứ hai có thể dễ dàng nhận ra bởi các khung nhìn chuyên biệt, được chỉ định cho các sự kiện bong bóng lên.
Sau đó, bạn sẽ cần các chế độ xem chuyên biệt và sự kiện bong bóng đó có nghĩa là được làm sôi nổi. Bạn phải cẩn thận không gửi các sự kiện như close
(hoặc bất kỳ sự kiện rối loạn nào) thay mặt cho các chế độ xem khác, vì điều đó sẽ gây ra tất cả các hành vi không thể đoán trước trong Khu vực và Chế độ xem. Hậu tố :bubble
cho phép bạn dễ dàng nhận ra những gì có nghĩa là bong bóng.Quan điểm bọt có thể trông như thế này:
var BubblingLayout = Marionette.Layout.extend({
handleBubbles: function (view) {
var bubble = /:bubble$/
this.listenTo(view, 'all', function() {
var args = _.toArray(arguments)
var event = args.shift()
if (event.match(bubble)) {
event = event.replace(bubble, '')
this.bubbleMethod.apply(this, [ event ].concat(args))
}
}, this)
}
})
Điều cuối cùng bạn cần phải chắc chắn là để có thể sự kiện bong bóng giữa các vùng (ví Layouts và mô-đun với các nhà quản lý khu vực tùy chỉnh). Điều đó có thể được xử lý với show
văn kiện từ một khu vực, như thế này:
var BubblingLayout = Marionette.Layout.extend({
regions: {
sidebar: '#sidebar'
},
initialize: function() {
this.sidebar.on('show', this.handleBubbles, this)
},
handleBubbles: function (view) {
var bubble = /:bubble$/
this.listenTo(view, 'all', function() {
var args = _.toArray(arguments)
var event = args.shift()
if (event.match(bubble)) {
event = event.replace(bubble, '')
this.bubbleMethod.apply(this, [ event ].concat(args))
}
}, this)
}
})
Phần cuối cùng là làm cho một cái gì đó thực sự bong bóng lên, mà có thể dễ dàng xử lý bởi các bubbleMethod
phương pháp mới:
var MyView = Marionette.ItemView.extend({
events: {
'click': 'clickHandler'
},
clickHandler: function (ev) {
// do some stuff, then bubble something else
this.bubbleMethod('stuff:done')
}
})
var BubblingLayout = Marionette.Layout.extend({
regions: {
sidebar: '#sidebar'
},
initialize: function() {
this.sidebar.on('show', this.handleBubbles, this)
},
onRender: function() {
var view = new MyView()
this.sidebar.show(view)
},
handleBubbles: function (view) {
var bubble = /:bubble$/
this.listenTo(view, 'all', function() {
var args = _.toArray(arguments)
var event = args.shift()
if (event.match(bubble)) {
event = event.replace(bubble, '')
this.bubbleMethod.apply(this, [ event ].concat(args))
}
}, this)
}
})
Bây giờ bạn có thể xử lý các sự kiện sôi nổi từ bất kỳ vị trí nào trong mã của bạn, nơi bạn có thể truy cập một phiên bản BubblingLayout
.
này dường như không hoạt động nếu tôi nâng cao sự kiện từ chế độ xem trong vùng con bố cục? – Jon
Xin lỗi, đó là một chút đoán thật sự. Sự kiện nhấp chuột sẽ làm bong bóng phân cấp DOM lên chế độ xem bố cục của bạn để bạn có thể nắm bắt nó trong Bố cục của mình bằng cách sử dụng đối tượng sự kiện thông thường. –
Bạn có thể đặt cùng một ví dụ http://jsfiddle.net đơn giản không? –