View inheritance doesn't render the both views

Question

I would like to build my first view inheritance on Backbone.js, very classic, a template which is a navbar with the register/login/logout options as a father of all my other views.

The code seems to works find, each initialize method are called, but it doesn't work at the render part.

I can instanciate templateFrontendView() (the fathter) which works fine (i have the navbar on my view), or i can instanciate homeView() (child of templateFrontendView) but i'll just have the render of this one, the render of templateFrontendView disapears even i call it in the initialize method...

Here is the jsfiddle with all the code

     window.User = Backbone.Model.extend({
            defaults : {
                id : "1",
                username : "anonymous",
                facebook_id : "1235486421",
                facebook_token : "AEZH93FZFEFSFSFS4545154sfsfSF"
            },
            urlRoot: 'http://localhost:3000/user',
            initialize : function() {
                console.log('User Constructor...');                                                                                              
            this.url = "http://localhost:3000/user/"+this.get('username')+'/'+this.get('facebook_id')+'/'+this.get('facebook_token');
            }
  });


window.templateFrontendView = Backbone.View.extend({
        el : $('#template-frontend-container'),

        initialize : function() {
           this.model = new User();
           this.template = _.template($('#template-frontend-template').html());
           this.render();
        },

        events: {
          "click a.fb_connect": 'fetch_user'
        },

        fetch_user: function(){
            console.log("Save requested...");
        },render : function() {
            this.delegateEvents();
            var renderedContent = this.template(this.model.toJSON());
            $(this.el).html(renderedContent);
            return this;
        }
    });

    window.homeView = templateFrontendView.extend({
            el : $('#home-container'),

        initialize : function() {
           templateFrontendView.prototype.initialize.apply(this);
           this.model = new User();
           this.template = _.template($('#home-template').html());
           this.render();
        },

            render : function() {
                this.delegateEvents();
                var renderedContent = this.template(this.model.toJSON());
                $(this.el).html(renderedContent);
                return this;
            }
    });

    var App = {
        home: function() {
            var V = new homeView();
        }
    }

    $(document).ready(function(){
      App.home();
    });

And the view

<!-- Template Frontend -->
      <script type="text/template" id="template-frontend-template">
        <div class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="#">Chon the Road</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a style="display: none;" class="account" href="#">Welcome <span><%= username %></span></a></li>
              <li><a style="display: none;" class="fb_connect" href="#"><img src="img/fb-connect.png" alt="fb-connect" /></a></li>
            </ul>
          </div>
        </div>

      </script>

      <div id='template-frontend-container'></div>
      <!-- Template Frontend -->

      <div id="fb-root"></div>

      <!-- Home -->
      <script type="text/template" id="home-template">
        <span><%= username %></span>
      </script>

      <div id='home-container'></div>
      <!-- Home -->

Thanks !

I would suggest composition over inheritance here (and pretty much everywhere else for that matter). You're not chaining the `render` calls, you'll have problems with `this.template`, your `$(this.el).html(...)` calls will fight each other, ... — mu is too short, Oct 10 '12 at 15:46
Ok i see, but how do you suggest me to do ? Because all my views will need this navbar, isn't the goal of the view inherance to automate these proccess ? The username which is in the top bar is dynamic so i have to link it with a view, except if i don't use backbone to manage it, but it's a shame, what do you think ? — Ludo, Oct 10 '12 at 16:14
One view for the navbar, another view (or several other views) for the main content, and an overall view to manage the page itself (which will simply contain the other views). — mu is too short, Oct 10 '12 at 17:14
Ok i get the idea, but i never saw that (for the view which manage all the views), could you please show me a little example or make an update on my Jsfiddle ? Thanks for your help ! — Ludo, Oct 10 '12 at 21:06
I think you're looking for a structure more like this: http://jsfiddle.net/ambiguous/4Bx6h/ — mu is too short, Oct 11 '12 at 00:14
Very interesting ! I can try a lot of tests with this base. Thanks again ! — Ludo, Oct 11 '12 at 08:25

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

I added a call to the parents initialize in window.homeView: http://jsfiddle.net/japNK/18/ as explained here: Accessing parent class in Backbone

edited May 23 '17 at 12:04

Community

1
1

answered Oct 10 '12 at 10:06

Werner Kvalem Vesterås

10,226
5
43
50

I thought it wasn't neccessary to add the "window." before the parent initialize call. But i don't see any change, there is just "anonymous" from the `home-container` but still no "Welcome anonymous" from the `template-frontend-container` printed in the view, am i wrong ? – Ludo Oct 10 '12 at 10:22

View inheritance doesn't render the both views

1 Answers1