骨幹路由器 - 加載數據

Question

編輯：得到它的工作，但它似乎是錯誤的。

我最終將監聽器添加到主應用視圖上的同步事件，然後呈現播放器。我還添加了一個全局變量PgaPlayersApp.CurrentPlayer。

我該怎麼做呢？什麼是正確的方法來做到這一點？是否有我無法使用reset: true然後監聽重置事件的原因？ （它不工作）

路由器：

// js/router.js 
var PgaPlayersApp = PgaPlayersApp || {}; 

var Router = Backbone.Router.extend({ 
    routes:{ 
     'player/:id': 'loadPlayer' 
    }, 
    loadPlayer: function(id) 
    { 
     PgaPlayersApp.CurrentPlayer.set('id', id); 
     PgaPlayersApp.CurrentPlayer.fetch();  
    } 
}); 

PgaPlayersApp.Router = new Router(); 
Backbone.history.start(); 

VIEW：

//js/views/app.js 

var PgaPlayersApp = PgaPlayersApp || {}; 

PgaPlayersApp.AppView = Backbone.View.extend({ 
    el: '#pga_players_profile_app', 
    initialize: function() 
    { 
     this.listenTo(PgaPlayersApp.Players, 'reset', this.addAll); 
     this.listenTo(PgaPlayersApp.CurrentPlayer, 'sync', this.loadPlayer); 
     PgaPlayersApp.Players.fetch({reset: true}); 
    }, 

    ... 

    loadPlayer: function() 
    { 
     new PgaPlayersApp.PlayerCardView({ model: PgaPlayersApp.CurrentPlayer }).render(); 
    } 

}); 

Answer 1

Backbone.js的是，並沒有真正執行你想如何構建應用程序庫（或者你的控制器，型號，路由器等之間的關係）

下面是實現它的許多方法之一。

夫婦亮點：

1. 路由器序幕的取出處理。
2. 當模型已被提取，路由器然後要求查看渲染數據（而不是由瀏覽收聽的模式改變的事件。）

這假定PlayerCardView是「只讀」的看法，因爲視圖不聽從模型中更改事件。根據您的使用情況，這可能並不理想，因此最終取決於您希望如何處理它。

下面是一些示例代碼：

(function (export) { 
    var App = export.App = {}; 

    // Stores state/current views of the App 
    App.state = {}; 
    App.state.currentPlayer = null; 

    // Model containing the player 
    App.PlayerModel = Backbone.Model.extend({}); 

    // Single Player View (Assuming you have a collection view for list of players) 
    App.PlayerCardView = Backbone.View.extend({ 
     model: App.PlayerModel, 
     template: _.template('<%= id %>'), 
     render: function(parentEl) { 
      // Render player 
      this.$el.html(this.template(this.model.toJSON())); 

      // Append player view to parent container 
      if (parentEl) { 
       parentEl.append(this.$el); 
      } 

      return this; 
     } 

     // Don't forget to clean up as well! 
    }); 

    // Router 
    App.Router = Backbone.Router.extend({ 
     routes: { 
      'player/:id': 'showPlayer' 
     }, 
     showPlayer: function(id) { 
      // Unload current player view, if necessary 

      // Construct model 
      var player = App.state.currentPlayer = new App.Player({ 
       id: id 
      }); 

      // Pass model to the new player view 
      var view = App.state.currentPlayerView = new App.PlayerCardView({ 
       model: App.state.currentPlayer 
      }); 

      // At this time, you should probably show some loading indicator as you're fetching data from the server 

      // Fetch data 
      player.fetch({ 
       success: function() { 
        // This would be called when data has been fetched from the server. 

        // Render player on screen 
        view.render($('#parentContainerId')); 
       } 
      }); 
     } 
    }); 

    // Initializes the App 
    App.init = function() { 
     // Kick off router 
     App.state.router = new App.Router(); 
     export.Backbone.history.start(); 
    }; 
})(window); 

// Start the app! 
window.App.init(); 

要點：https://gist.github.com/dashk/5770073