69064

How to bind context of child view handling event in parent view

Question:

I have the following Backbone View's:

var ParentView = Backbone.View.extend({ events: { "contextmenu .child-view" : "handleChildView" }, initialize: function () { // create child view var child = new ChildView; }, handleChildView: function () { } }); var ChildView = Backbone.View.extend({ initialize: function () { this.el.addClass('child-view'); } });

I need to handle childView's contextmenu event in handleChildView handler. But I need to get refference to childView and target DOM element.

How could I make this?

Answer1:

I usually would try to avoid that. I think it's an anti-pattern since I believe each view should only handle it's own events.

When there's a need for notifying events between views, I use the event bus pattern.(publisher/subscriber)

see this answer I posted earlier:

<a href="https://stackoverflow.com/questions/20181679/call-a-function-in-another-marionette-itemview/20182584#20182584" rel="nofollow">Call a function in another Marionette.ItemView</a>

It's similar.

You should define an event bus in your app. And in your ChildView, publish an event when something happens (like click)

var ChildView = Backbone.View.extend({ events: { 'click': 'handleClick' }, handleClick: function() { //publish event EventBus.trigger('childViewClicked', [anything you wanna pass]); } });

and in your parent view, subscribe to this event:

var ParentView = Backbone.View.extend({ initialize: function () { //subscribe events: EventBus.on('childViewClicked', this.handleChildView, this); }, handleChildView: function ([params you wanna receive]) { } });

Answer2:

Would this work for you?

var ParentView = Backbone.View.extend({ events: { "click .child-view .contextmenu" : "handleChildView" }, initialize: function () { // create child view var child = new ChildView; }, handleChildView: function () { } }); var ChildView = Backbone.View.extend({ className:'child-view' , initialize: function () { this.el.addClass('child-view'); } });

You might have to render the child view inside the parent view (in the DOM)

Recommend

  • SQLite query progress bar
  • Deploying Qt 5 App on Windows
  • adding a “loading” image to dynamic images comming from flickr
  • Firefox 4: Changed alert behaviour?
  • Playing an alert if a script has an error
  • Make Progress Bar Running From Public Class
  • Converting the entire listview items (children) to bitmap
  • Dynamically add Edittext to a relative layout under an existing editText
  • onItemSelected listener
  • Nib-file loaded UIView in UITableViewCell does not stretch
  • Print available disk space and send email notification
  • How to change the message box title? [duplicate]
  • Is there a point in collecting registration tokens when using only the GCM Topics?
  • Promises and recurrent AJAX calls
  • Printing in IE8 Has @href contents inline
  • Increasing dimensions on hover without changing the position of other elements
  • .NET Core IHttpContextAccessor issue
  • finding symmetric difference/unique elements in multiple arrays in javascript
  • Matrix problem Python
  • Grouping vars in function
  • How to keep button state across different pages?
  • Click button with javascript
  • Get css animation property with jQuery
  • Android onKey w/ virtual keyboard
  • Why use database factory in asp.net mvc?
  • Detect when Facebook like button is clicked
  • AJAX Html Editor Extender upload image appearing blank
  • d3 v4 drag and drop with TypeScript
  • JQuery Internet Explorer and ajaxstop
  • Django rest serializer Breaks when data exists
  • How to rebase a series of branches?
  • Azure Cloud Service Web Role web pages do not load
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • Menu Color Fade on Hover with Jquery
  • WinForms: two way TextBox problem
  • what is the difference between the asp.net mvc application and asp.net web application
  • R: gsub and capture
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`
  • Linking SubReports Without LinkChild/LinkMaster