CODEWITHSUNDEEP
backbone.jsmarionettebackbone-viewsbackbone-events
Sva
Sva

Reputation: 115

Can't listen to a event from one view to another view in Backbone.Marionette

I'm trying to port the code from existing backbone to backbone.Marionette application. Refer the following url for application that i have started. http://www.adobe.com/devnet/html5/articles/backbone-cellar-pt1.html

According to my code structure, I have 2 views in my code.

  1. ItemView with a form
  2. Composite View that contains list of itemViews for each li tags.

Initially on page load, it renders the data from db using fetch() call and appends all wine names to side bar. Then, on each wine name click, I can view its corresponding details. My doubt is that, Everything works except listener from form itemView to CompositeView. I'll explain it in brief.

When i update/delete in the form ItemView, the particular li in CompositeView is not updated/deleted by listening to the event binder. It works if i use localstorage but not as server/db based app. What should i do for listener to listen changes from form itemView and render it. Any suggestions would help me to continue furthur.

Upvotes: 0

Views: 1074

Answers (1)

David Sulc
David Sulc

Reputation: 25994

When using a Marionette CompositeView, the rerendering will be done for you. You do NOT need to add a listener to the model or collection, because Marionette automatically listens to those events.

If this doesn't solve your issue, put your code on jsfiddle so we have a functional example of the non-working code.

Edit based on jsFiddle :

I've added code that should make your example functional (hard to determine without a functional example) : http://jsfiddle.net/VvXDs/ Basically, I added an app-level message, and listen for it it the list to trigger render if necessary. Although this is functional, this pattern is bound to cause problems.

The main thing that is making your life more complicated, is the fact that you're managing the routing as if the application were stateless web app (more on that here http://lostechies.com/derickbailey/2011/08/03/stop-using-backbone-as-if-it-were-a-stateless-web-server/).

What's happening is that you have a collection with all of your chocolate, and a user clicks on a link to display one of them. Then, although you already have the data, you fetch a new instance of the model to display from the server. So obviously, the listener won't work: they're defined on 2 different instances (client side) of the same model (server side). (If you're worried about stale data, you should instead pass the same model instance to the view, and call fetch on that instance to update the data.)

A better design approach is to use the same client side model instance in both your menu and the form view. Then, when the model changes, the menu line item will automatically get updated (because they're using the same model instance, so the "change" event listener will word properly).

If you're interested in learning more about using routing in a stateful manner, take a look at the free sample to my book http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf (chapter "Implementing routing").

Remember: the code I added should work, but the design will probable make your development more challenging...

Upvotes: 1

Related Questions