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/：バックボーンでの親クラスへのアクセス

于 2012-10-10T10:06:10.020 に答える