Backbone web app architecture - best practice

Question:

I am rewriting a web app in backboneJS and I'm wondering about the general architecture compared to my previous approach.

Please let me know if you think this questions should be on CodeReview instead of StackOverflow.

This is how I tried to build web apps MVC style without any framework like backbone or angular:

var App = function() {
    // ...
};

Every main object like App, Page, Product or whatever had it's own model property that holds data typically recieved from a RESTful API interface and a view property that holds a jQuery object with all HTML and event-handlers. It is cloned into the DOM once it's needed.

var Page = function(model) {
    this.model = model;
    this.view = this.render();
}

Page.prototype.render = function() {
    //get template, render it return jQuery object

    return $(html)
}


window.Shop = {
    app: new App({}),
    pages: {
        home: new Page({}),
        products: new Page({})
    }

}

This was my traditional approach to a lot of web apps. It was nicely structured and I always knew where to find my data and my views. More importantly they where part of the same object so I could easily handle my promises and/or deferred objects (hbs templates, API data, etc) between view and model data.

But with Backbone it seems like the View and the Model are their own, separate Objects and I'm not sure if I should handle the View as a child-object of the Model, the other way around or even on the same level.

This is one approach

var PageView = Backbone.View.extend({});
var Page = Backbone.Model.extend({

    initialize: function() {
        this.view = new PageView();
    }

});

window.Shop = {
    pages: {
        home: new Page({}),
        products: new Page({})
    }

}

This is another approach where I see problems because I can't access the view from the model or the other way around (there is no relation between them).

var PageView = Backbone.View.extend({});
var Page = Backbone.Model.extend({});

window.Shop = {
    pages: {
        home: {
            view: new PageView({}),
            model: new Page({})
        },
        products: {
            view: new PageView({}),
            model: new Page({})
        }
    }

}

There are many other possibilities and I'm unsure what's the best way to move forward.

One of the main principles of MVC is that models should never know about the controller/view layer. You should never access a view from a model. This is so that you can use the same model in multiple views.

In Backbone, you usually pass models into a view when they are created. Check out this following example.

var User = Backbone.Model.extend({});
var UserView = Backbone.View.extend({
  render: function() {
    this.$el.html(this.template(this.model.toJSON());
    return this;
  }
}

var view = new UserView({model: new User()});
view.render();

Often this is done by fetching a collection from the server and then displaying each model in the collection.

var User = Backbone.Model.extend({});
var UserCollection = Backbone.Collection.extend({
  model: User
});

var UserView = Backbone.View.extend({
  render: function() {
    this.$el.html(this.template(this.model.toJSON());
    return this;
  }
}

var UsersView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.collection, 'reset sync', this.render);
  },

  render: function() {
    this.$el.empty();
    this.collection.each(function(user) {
      var view = new UserView({model: user});
      this.$el.append(view.render().el);
    }
    return this;
  }
}

var users = new UserCollection();
var view = new UsersView({collection: users});
users.fetch();

There are many tutorials out there that go more detail, you should check them out.

Related:

Create array from another with specific indices

Javascript sort array of objects in reverse chronological order

Login Signup PopUp

Javascript change the souce of all images present inside a string

How to use a service with Http request in Angular JS

How to find the days b/w two long date values

Saving data using promises

Changing interval time to random?

submitting form then showing loading image by javascript

Cant submit form

show div only when printing

Javascript function to validate contents of an array

Insert data in collection at Meteor's startup

slideToggle state not working with multiple boxes

Converting “i+=n” for-loop to $.each

Please can someone help me understand the exec method for regular expressions?

Background-image style with JS not working in ie9

Target next instance of an element/div

Wordpress log out using URL and redirect to specify page

want to show and hide text using “this” jquery

show/hide an overflow div on anchor

Can't call fetch directly in Backbone model listenTo

How To Check Value Of String

Onclick add html content and remove it by clicking “delete” link

How to send current page number in Ajax request

Dynamically resize side-by-side images with different dimensions to the same height

session value in javascript cannot be set

JSLint error: “Expected a newline at EOF”, conflict with Beautify plugin

How to get my node.js mocha test running?

Merge and sum values and put them in an array

Javscript Replace Text in tags without changing children element HTML and Content

Sockets make no sense?

Click on link next link should be display on same page

Javascript: Forloop Difference between i++ and (i+1)

why i don't get return value javascript

Parsing XML array using Jquery

Angular $http and Fusion Tables in IE9

Get all prices with $ from string into an array in Javascript

Substring of a file

KnockoutJS custom component loader not executing `loadViewModel`

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

Saving image to localstorage - canvas

Not able to access variables in required file

Uncaught error: Invalid type for google table column

Automatically calling server side class without

Teechart HTML5, line color and thickness

Replacing elements in an HTML file with JSON objects

Get elements containing text from array

Google map infowindow position