CODEWITHSUNDEEP
backbone.js
mcclennon19
mcclennon19

Reputation: 623

Backbone - Using Models and View Correctly

I would like some clarity on the correct way to use models and views in backbone. What should be used first and why if possible.

For example: If I have an application that displays a series of different images on the page, once its clicked it moves page that shows just the image with name, description, colour etc.

What would be a better method to use;

  1. Clicking the image and this changing the URL which triggers the router, which displays the correct view. The from that view load the model.

  2. Having a click event attach to each image, which changes the details in the model, which then triggers an event to change the view.

  3. Using the router again, to call the model to then trigger the view. However would I still be able to get the details using the model.

  4. Calling them both in the router and passing the model through to the view? Again how is this done?

  5. A different method

I am using backbone boilerplate, which I think might be confusing me a bit. But any articles or explanations would be very helpful.

Upvotes: 1

Views: 358

Answers (2)

mvbl fst
mvbl fst

Reputation: 5263

Clicking the image and this changing the URL which triggers the router, which displays the correct view. The from that view load the model.

You do not necessarily need a router. You only want to use it if you plan to use this URL as a permalink for example and have image detail view open once user goes to this link.

Having a click event attach to each image, which changes the details in the model, which then triggers an event to change the view.

Why do you want to change model on click? From what I understand, you have 3 views: container which hold image thumbs, thumb image view and image detail view (opening a larger image in a lightbox for example). Now when you construct the container, you pass collection with images as an argument. Container renders thumb image views for each item in the collection. Remember that now each thumb view has the image model. Now on click invoke image detail view and pass model that you already have as an argument. No model change, routing or events is really involved at this point.

Upvotes: 0

Bryan A
Bryan A

Reputation: 3634

The way I usually set things up is that I make heavy utilization of Backbone.Events; I tend to intercept the click events in views by binding those events to a method in the view. In turn, that bound event will do some view-specific work, then will do something like this.trigger("Router_SomeEvent") -- the binding for that event is specified, typically, where the view is created in the router, like so:

// Begin router snippet...
someRouteMethod: function() {
   this.views.SomeViewInstance = new MyViews.SomeViewClass();
   this.views.SomeViewInstance.bind("Router_SomeEvent", this.onSomeEvent);
},

onSomeEvent: function() {
   this.navigate("NewLocation", { trigger: true });
}
// End router snippet

Using this sort of publish/subscribe (pub/sub) pattern, your code becomes more decoupled and easier to handle and extend. It's a bit confusing at first, but once you get the hang of it, it becomes more and more clear why it's useful. I tend to have my router handle all of the... well... routing, while my views simply contain the logic for rendering, event binding to the UI, and bubbling up events to the router if necessary. You can also bind events to your model; I tend to use models similarly to views in that they will notify my router of some change, and the router will go ahead and handle that event by changing view state, altering other models or collections, etc.

Backbone is extremely powerful, but it takes quite some time to learn. I recommend Addy Osmani's Backbone Fundamentals; he also has a book on O'Reilly that's a really great read.

Upvotes: 2

Related Questions