骨干路由器的主/细节视图

Question

我在这里看到了一个类似的问题：Backbone.js Master-Detail scenario但我想要使用Backbone.js哲学更详细地说明Master/Detail视图的“架构”。

我在我的应用程序中有一个路由器，负责实例化两个集合视图中的一个。说一个是Questions，另一个是Committees。在顶部有两个锚链接，分别路由到#questions-view和#committees-view，由路由器拾取并正确切换视图。我有这一切工作。我是否应该拥有一个全球性的App视图来跟踪所有这些元素，比如一些教程如何操作，或者顶级的Router足够好？

此外，在我的committees视图中，我将列出一个委员会名单，点击后，它将更新页面上的另一个框，其中包含该委员会的问题列表。这并不难，但我也想让它触发路由器，并且该视图无法访问Router，我不确定是否应该。例如，我想导航到..#committees/5加载视图与委员会ID 5选择，显示所有这些问题。我发布了一些我正在使用的代码的基础知识。我可以很容易地在我的MRFQuestionsCommitteeView.js中有一个详细子视图，它可以更新点击事件，但它会触发令我困惑的路由器。

感谢您的帮助！

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     ''    : 'home', 
     'question-view' : 'home', 
     'committee-view(/:committeeId)' : 'committeeView' 
    }, 


    home: function() { 
     var $this = this; 
     var prom = new MRFQuestions().fetch({ 
      success: function(coll) { 
       $this.loadView(new MRFQuestionsView({ collection: coll, el: $('#ViewContainer') })); 
      } 
     }); 
    }, 

    committeeView: function(committeeId) { 
     var id = parseInt(committeeId, 10); 
     var self = this; 
     var c = new Committees(); 
     c.fetch({ 
      success: function(data) { 
       var x = self.loadView(new MRFQuestionsCommitteesView({ collection: c, el: $('#Container2') }));    
       $.when(x).then(function() { 
        self.view.loadDetailPage(5); 
       }); 
      } 
     }); 
    }, 

    loadView: function(view) { 
     this.view && this.view.remove(); 
     this.view = view; 
     return this.view.render(); 
    } 
}); 

Answer 1

你的路由器应该是这样的

var pageRootEl = $('.page-container'); 
var currentPage ; 
var currentPageId = defaultPage; 

var defaultPage = 'page1'; 

var paramsToObject = function(params) { 
     if (!params) { 
      return {}; 
     } 
     var paramsArray = _.map(params.split(';'), function(str) { 
      return str.split('='); 
     }); 
     var obj = {}; 
     _.each(paramsArray, function(arr) { 
      obj[arr[0]] = arr[1]; 
     }); 
     return obj; 
    }; 


var Router = Backbone.Router.extend({ 
    routes: { 
     ':pageId': 'renderPage', 
     ':pageId/*params': 'renderPage', 
     '':'renderDefaultPage', 

    }, 
    renderPage: function (pageId, params) { 
     var paramsObject = paramsToObject(params); 

     if(currentPageId === pageId && currentPage){ 
      currentPage.model.set(paramsObject); 
      return; 
     } 

     if(currentPage){ 
      currentPage.remove(); 
     } 
     pageRootEl.empty(); 


     switch (pageId) { 
      case 'page1': 
       $.getScript('pages/' + pageId + ".js", function() { 
        currentPage = new Page1.View({ 

        }); 

        currentPage.render().$el.appendTo(pageRootEl); 
       }) 
       break; 

      case 'page2': 
       $.getScript('pages/' + pageId + ".js", function() { 
        currentPage = new Page2.View({ 
        }); 
        currentPage.render().$el.appendTo(pageRootEl); 
       }) 
       break; 

      case 'page3': 
       $.getScript('pages/' + pageId + ".js", function() { 
        currentPage = new Page3.View({ 
        }); 
        currentPage.render().$el.appendTo(pageRootEl); 
       }) 
       break; 
     } 


    }, 
    renderDefaultPage: function(){ 
     this.renderPage(defaultPage); 
    } 
}) 


var router = new Router(); 


Backbone.history.start({ 
    root: this.root 
}); 

你可以看到，每一个路由器的通话将经历相同的功能，如果PAGEID变化，那么当前是被替换为新的页面，否则新PARAMS刚获得添加到页面模型，在页面视图中你可以监听更改，并处理选择，显示问题等。你的url模式应该像＃pageId/param1 = value1; param2 = value2; param3 = value3。该模式允许您添加更多参数并缩放应用程序。