backbone.js structuring nested views and models

by

To be able to reach attributes on related models, the model must have some kind of knowledge about what models it is related to. Backbone.js does not implicitly deal with relations or nesting, which means you must yourself make sure that the models have knowledge of each other. To answer your questions, one way to go about it is to make sure each child model has a ‘parent’ attribute. This way you can traverse the nesting first up to the parent and then down to any siblings that you know of.

To be more specific with your questions. When initializing modelA, you are probably creating modelB and modelC, I would suggest setting a link to the parent model when doing this, like this:

ModelA = Backbone.Model.extend({

    initialize: function(){
        this.modelB = new modelB();
        this.modelB.parent = this;
        this.modelC = new modelC();
        this.modelC.parent = this;
    }
}

This way you can reach the parent model in any child model function by calling this.parent.

Regarding your views, when doing nested backbone views, I find it easier to let each view represent one HTML tag by using the tagName option of the view. I would write your views as this:

ViewA = Backbone.View.extend({

    tagName: "div",
    id: "new",

    initialize: function(){
       this.viewB = new ViewB();
       this.viewB.parentView = this;
       $(this.el).append(this.viewB.el);
    }
});

ViewB = Backbone.View.extend({

    tagName: "h1",

    render: function(){
        $(this.el).html("Header text"); // or use this.options.headerText or equivalent
    },

    funcB1: function(){
        this.model.parent.doSomethingOnParent();
        this.model.parent.modelC.doSomethingOnSibling();
        $(this.parentView.el).shakeViolently();
    }

});

Then in your application initialization code (eg in your controller), I would initiate ViewA and place its element inside the body element.

More Related Contents:

  1. Underscore template throwing variable not defined error
  2. Explanation of …
  3. Best way to iterate over an array without blocking the UI
  4. Why define an anonymous function and pass it jQuery as the argument?
  5. Backbone.js Empty Array Attribute
  6. Loading Backbone and Underscore using RequireJS
  7. External template in Underscore
  8. Getting Chrome to prompt to save password when using AJAX to login
  9. Backbone.js fetch with parameters
  10. What is two way binding?
  11. How to use if statements in underscore.js templates?
  12. Destroy or remove a view in Backbone.js
  13. Finding JavaScript memory leaks with Chrome
  14. Ways to save Backbone.js model data?
  15. Backbone.js and pushState
  16. Backbone: event lost in re-render
  17. Backbone.js get and set nested object attribute
  18. In Javascript, what does this underscore mean?
  19. How to improve rendering performance when using $.html()
  20. Backbone View: Inherit and extend events from parent
  21. How do I fetch a single model in Backbone?
  22. Disposing of view and model objects in Backbone.js
  23. start javascript code with $(function, etc
  24. Backbone.js – data not being populated in collection even though fetch is successful
  25. Reverse sort order with Backbone.js
  26. Computed properties in Backbone
  27. Tell screen reader that page has changed in Backbone/Angular single-page app
  28. How to capture the key event from a view?
  29. What is the difference between these Backbone/Underscore .bind() methods?
  30. rails and backbone working together

Leave a Comment