Question

I am enjoying backbone.js more and more. I desire to have multiple views for a given model:

  • A list-view where each model has a view with it's own li element.
  • A detail view showing all of the details of a model.

My question is, I was seeking a good way to allow one view to communicate with another and elected the following:

/** Allow a model to keep track of it's views. **/
Backbone.Model.prototype.addView = function (view) {
    // Ensure our model has a view array.
    if (typeof this.views === 'undefined')
    {
        this.views = [];
    }

    // Append our newest view to the array only if it is not already present.
    if (_.indexOf(this.views, view) === -1)
    {
        this.views.push(view);
    }
}

/** Allow a model to remove all of it's views.
 * 
 * @param {Object} args Any arguments will be provided to the view's method.
 */
Backbone.Model.prototype.unloadViews = function (args) {
    var n = (typeof this.views === 'undefined') ? 0 : this.views.length;
    for (var i = 0; i < n; i++)
    {
        var view = this.views[i];
        if (typeof view.unloadView === 'function')
        {
           view.unloadView(args);
        }
    }
}

/** Allow a model to re-render all of it's views.
 * 
 * @param {Object} args Any argyments will be provided to the view's method.
 */
Backbone.Model.prototype.renderViews = function (args) {
   var n = (typeof this.views === 'undefined') ? 0 : this.views.length;
   for (var i = 0; i < n; i++)
   {
        var view = this.views[i];
        if (typeof view.render === 'function')
        {
            view.render(args);
        }
   }
}

My Questions

  1. Am I missing something as I learn backbone.js which will allow me to do this nativly?
  2. Is there a reason I should avoid this?

Additional Info

I have shared the application (quite rudimentary) on GitHub: https://github.com/aarongreenlee/Learning-backbone.js. If you prefer to see the code in that environment, you can access it here: https://github.com/aarongreenlee/Learning-backbone.js/commit/ea4e61d934d2f987726720e81c479f9d9bb86e09#diff-2 (initial commit).

Thank you for your time and help!

Was it helpful?

Solution

Well your views can have a tree like reference but your model shouldn't know about your views!

You should set your views to listen to change events from the models and have them react accordingly (re render that is).

This way you avoid cross reference between lower parts of your software (the one that should be rock solid, the model) and the higher parts, the views. Classic MVC separation.

So move your addViews, removeViews to Backbone.View and it should be good. You will be creating a hierarchical view system, much like what sproutcore offers.

Have fun!

OTHER TIPS

An answer came in from Twitter from Jeremy Ashkenas of Document Cloud

@aarongreenlee No reason to avoid it -- if you want to have your views keep a tree-like reference to one another, that's certainly legit. -@jashkenas

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top