Connection between the view and the router's backbone

Question

Connection between the view and the router's backbone

In my opinion, it is important to maintain isolation between the router and view in data-driven programming paradigm. They should only communicate with each other through model changes that they both subscribe to.

However, I have noticed that different online tutorials approach this issue in various ways. Some instantiate a view inside the router's initialize method, allowing the router to access the view. Others pass the router to the view so that it can listen for changes on the router's route events.

I personally do not believe either of these approaches is correct as they violate the separation of concerns principle. As a newcomer to Backbone, I would appreciate input from someone more experienced and knowledgeable to confirm my thoughts.

javascript backbone.js

Answer 1

Answer №1

Utilizing the Router to instantiate Views is a seamless process that aligns with my typical workflow. When a new URL is detected, the Router efficiently manages the detachment of any unused Views and instantiates the required ones.

Although some may argue that passing the Router reference to the View can be cumbersome, I find it necessary for Views to communicate with the Router in order to facilitate navigation changes. By making the Router globally accessible throughout my App, I can easily utilize App.router.navigate() from any View without the need to pass the reference explicitly.

This strategy makes sense considering only one Router instance is permitted within a Backbone application, simplifying the overall development process.

Answer 2

Utilizing the Router to instantiate Views is a seamless process that aligns with my typical workflow. When a new URL is detected, the Router efficiently manages the detachment of any unused Views and instantiates the required ones.

Although some may argue that passing the Router reference to the View can be cumbersome, I find it necessary for Views to communicate with the Router in order to facilitate navigation changes. By making the Router globally accessible throughout my App, I can easily utilize App.router.navigate() from any View without the need to pass the reference explicitly.

This strategy makes sense considering only one Router instance is permitted within a Backbone application, simplifying the overall development process.

Answer 3

Answer №2

One technique I've utilized in certain projects involves implementing a global event dispatcher to relay routing events to the views.

window.Dispatcher = _.extend({}, Backbone.Events);

Within the router, you can listen for the 'all' event to capture all route:* events:

initialize: function() {
    this.bind('all', this.onRoute);
},
onRoute: function(route) {
      Dispatcher.trigger(route);
}

For the views, you can bind to Dispatcher events and respond to changes in routes:

initialize: function() {
    Dispatcher.on('route:index', this.onIndex, this)
}

This approach is akin to having a model that updates with route changes, but it feels more streamlined and eliminates the need to pass the router to views. It may not be the conventional way of doing things, but with Backbone, there are numerous approaches at your disposal.

Answer 4

One technique I've utilized in certain projects involves implementing a global event dispatcher to relay routing events to the views.

window.Dispatcher = _.extend({}, Backbone.Events);

Within the router, you can listen for the 'all' event to capture all route:* events:

initialize: function() {
    this.bind('all', this.onRoute);
},
onRoute: function(route) {
      Dispatcher.trigger(route);
}

For the views, you can bind to Dispatcher events and respond to changes in routes:

initialize: function() {
    Dispatcher.on('route:index', this.onIndex, this)
}

This approach is akin to having a model that updates with route changes, but it feels more streamlined and eliminates the need to pass the router to views. It may not be the conventional way of doing things, but with Backbone, there are numerous approaches at your disposal.

Connection between the view and the router's backbone

Answer №1

Answer №2

Similar questions

I'm having trouble with the calculator, unable to identify the issue (Typescript)

Add a new item to an array in Angular 2 when a click event occurs

Creating a new row with a dropdown list upon clicking a button

Encountering issues in parsing JSON for PhoneGap Application

What specific files from the Kendo core are required for utilizing Mobile and Angular functionalities?

Populating a clickable list and form with a complex JavaScript object

I am looking to record my data by utilizing getInitialProps() in next.js

Transferring a JavaScript Value to a PHP Variable (Under Certain Constraints)

When using Material UI TextField with input type "date", the event.target.value does not seem to be accessible

Dividing a JSON array by a specific key using lodash underscore

There was a hiccup in the camera positioning as the tweening began

Autofill with JavaScript - Dynamic Form Population

I encountered an issue while attempting to utilize a JavaScript script - I received an error message stating "Uncaught ReferenceError: jQuery is not defined."

Best way to position camera to look at or above a specific location on a sphere in Three.js

What are the steps for implementing custom edit components in material-react-table?

How to access and utilize parent directive methods effectively in AngularJS

Using regex in Javascript to find and match an ID within a string

The ajv-based middy validator does not adhere to the specified date and time format

Node.js: Attempting to arrange ISO dates based on their time span

What could be causing a successful return from JQuery Ajax but still showing an error in Firebug within a PHP application?