如何管理骨干网应用程序？

Question

I am trying to wrap my head around Backbone, more specifically how the an application flows throughout it's life. Unfortunately at my job I do not have access (or say for that matter) on how our API is structured. We have many different calls from different time periods with crazy inconsistent structure.

Overriding fetch or sync is not a problem to standaraize the return but what I run into (at the very beginning of my dive in the a Backbone application) is a how to layout the actual code.

Here is my real world example. This page is non-critical and I am trying to re-write it with Backbone. Here is the flow:

1. Page loads a list of genre types from a call
2. Clicking on a genre type loads sub genres based off of the genre type (the sub genre type requres a genre code as the parameter)
3. Clicking on the sub genre type loads all products with that criteria.

I can get pretty far but at some point I feel the code is getting mangled - or doesn't feel natural. Like I am shoving things in.

So my official questions is: How do I manage a Backbone app?

Here is a summary of my though process:

I created a global namespace as one should

var App = App || {};

Okay, lets start with the main application view as all examples show:

App.MainView = Backbone.View.extend({
   //this loads the outer stuff
   //and creates an instance of the Genre View
});

Alright pretty straightforward, I am going to need a genre model, collection, and view (this applies to sub genre as well)

App.Genre = Backbone.Model.extend();

App.Genres = Backbone.Collection.extend({
  url: 'returns a list of genres',
  model: App.Genre,
  initialize: function() {
    this.fetch();
  },
  fetch: function() {
    var self = this;

    $.ajax({
      url: this.url,
      success: function(response) {
        **format return**
        self.add(formattedArrayOfModels);
      }
    });
  }
});

Now on to the view, the confusing part

App.GenreView = Backbone.View.extend({
  el: 'element',//easy enough
  tmpl: 'my handlebars template',//implementing handlebars...no problem
  initialize: function() {
    //this produces a collection full of genres
    this.genreList = new App.Genres();
    this.genreList.on('add', _.bind(this.render, this));
  },
  render: function() {
    //rendering not a problem, pretty straight forward
  }
});

Up until here I have no problems. The genre list loads and we're good to go. So, now when the user clicks a genre I want it to load a sub genre

events: {
  'click a': 'getSubGenres'
},
getSubGenres: function(e) {

}

Here is my problem. In getSubGenres do I keep it local?

var subGenre = new App.SubGenreView();

Or should I make it part of the Genre view?

this.subGenre = new App.SubGenreView();

Should I somehow put it in a parent object so it can be accessed by other views? How do I control things like that?

And if I already have a collection of sub genres how do I just use the loaded collection (instead of another ajax call).

Is this the approach you would use?

Answer 1

couple of things before I answer, first: the fetch function doesn't need an $ajax call since it's its job, so, you can evaluate error:function(){} and success:function(){} immediately inside fetch, but that's assuming that the URL is set correctly. second: one thing that helped me a lot in my backbone keyboard-head-fight is the addy osmani Backbone Fundamentals which contains a very rich tutorial in pdf format.

now back to the question: from my experience, you will mostly need 'this', so it's a good habbit to get used to it, plus there is something that solves a lot of these issues if implemented correctly: backbone layoutmanager

anyway, the decision of where to place the subview, is totally a design decision in your case and depends a lot on how you structure your page and files.

about how to use the "collection" that is preloaded: I really didn't get it, because the collection you're talking about contains all the subgenres, so usually it shouldn't change even if the view changes to a certain genre view, you are still able to use it.

but still everything I said, is relative to how you structure your files, I do an app.js and a router.js and lots of other files, but the main work is always on the main two, so basically I always get access to everything.

I hope this answered your question