0

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

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

我可以实例化 templateFrontendView() （父亲），它工作得很好（我的视图上有导航栏），或者我可以实例化 homeView() （templateFrontendView 的孩子），但我只会有这个的渲染，渲染即使我在初始化方法中调用它，templateFrontendView 也会消失...

这是包含所有代码的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 -->

谢谢 ！

4

1 回答 1

0

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

于 2012-10-10T10:06:10.020 回答