Backbone.View: Delete different views related to different models

Question

I need to display three different views which are related to three different model or collections.
In order to perform this task I wrote the following code. (*)
Please tell me if it is the right way to make this, anyway it works.

Here my problem.
In one of this view, let's say the firstView, is possible to perform a DELETE request to the server which take care to delete all the data related to this three view.

Now I need to delete my three view… but from the firstView I cannot access to the others two views.

1) How can I perform this task?
2) Should I redesign/improve my implementation?

(*)

// module for display three different views

define([
    "js/views/01View",
    "js/views/02View",
    "js/views/03View"
], function (FirstView, SecondView, ThirdView) {

    var MainView = Backbone.View.extend({

        initialize: function ()
        {
            this.render();
        },

        render: function ()
        {
            var movie_id = this.options.movie_id;
            this.firstView = new FirstView(movie_id);
            this.secondView = new SecondView(movie_id);
            this.thirdView = new ThirdView(movie_id);
        }
    });    

    return MainView;
});

P.S.:

The _id is used to build the url parameter of collections or models

url1: http://localhost/movie/movie_id   (model1)
url2: http://localhost/movie/movie_id/followers   (collection2)
ulrs: http://localhost/movie/movie_id/feeds (collection3)

When I delete the model1 the view2 and view3 related to collection2 and collection3 should be removed.

I'm confused by your comment, you say that you have three different views and three different models, yet you pass the same model_id to your views. — Vincent Briglia, May 15 '12 at 13:56
model_id (the same id) is used to perform three different fetch to the server which corresponds to three different data model. I will add more information on my question. — underscore666, May 15 '12 at 14:07
feels like you're constructing your data around your views rather than your views around your data. Take a look at the following Backbone plugin: https://github.com/PaulUithol/Backbone-relational/ and set up your relationship between your data correctly. — Vincent Briglia, May 15 '12 at 14:16
Yes you are right, maybe because the html and the restapi was ready and I was in charge of implementing bb. Anyway do you think the only way to fix the problem is to use Backbone-relational? Would be great for me to have a quick solution for now. — underscore666, May 15 '12 at 14:34

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

To fit your problem based on our comments conversation, Backbone architecture revolves using events, so why not use an event aggregator to send events around, don't limit yourself to the backbone constructs. fire an event from one view to another in backbone This pattern provides an elegant solution to your problem.

edited May 23 '17 at 12:20

Community

1
1

answered May 15 '12 at 14:41

Vincent Briglia

3,068
17
13

score 1 · Answer 2 · answered May 15 '12 at 14:54

Views should not respond to direct method calls but to events. Said that you either create a common EventAggregator accesible from every View (as @20100 has explained in his answer) or you connect the Views through a common Model and make each View to listen to its own more interesting events on it.

In your case you can instantiate the Movie model out of the Views instantiations and connect the three Views around it:

// code simplified and not tested
var MainView = Backbone.View.extend({
  initialize: function ( opts ) {
    this.movie = new Movie({ id: this.opts.movie_id} )
    this.movie.fetch();
    this.render();
  },

  render: function () {
    this.firstView = new FirstView( this.movie );
    this.secondView = new SecondView( this.movie );
    this.thirdView = new ThirdView( this.movie );
  }
});

var ThirdView = Backbone.View.extend({
  initialize: function( opts ) {
    this.movie = opts.movie;
    this.movie.on( "destroy", this.cleanUp, this )
    this.followers = // fetch the followers as you do now, use this.model.id
  }

  cleanUp: function(){
    // your clean up code when model is detroyed
  }
});

I like the idea of an `EventAggregator`, but in your code I cannot see where I have to put it. I suppose in `MainView` and then pass it as parameter to the other views. Is it right? — underscore666, May 15 '12 at 15:02
I'm not explaining the idea of the `EventAggregator`, @20100 does it. But if very similar, instead of having a common `Model` you have a common `EventAggregator`, follow the link in the @20100`s answer. — fguillen, May 15 '12 at 15:10

Backbone.View: Delete different views related to different models

2 Answers2