视图继承不会呈现两个视图

Question

我想在 Backbone 上构建我的第一个视图继承.js，非常经典，一个模板，它是一个导航栏，带有注册/登录/注销选项作为我所有其他视图的父亲。

代码似乎可以找到，调用每个初始化方法，但它在渲染部分不起作用。

我可以实例化模板前端视图（）（

fathter），它工作正常（我的观点上有导航栏），或者我可以实例化 homeView（）（模板前端视图的子级），但我只会有这个的渲染，模板前端视图的渲染消失，即使我在初始化方法中调用它......

这是包含所有代码的 jsfiddle

     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();
    });

和风景

<!-- 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 -->

谢谢！

Answer 1

我添加了对 window.homeView 中初始化的父级的调用：http://jsfiddle.net/japNK/18/如下所述：在 Backbone 中访问父类