Question

我在这里看到了一个类似的问题：Backbone.js Master-Detail scenario但是我想对＃34;架构＆＃34;进行更多的澄清。使用Backbone.js哲学的主/详细视图。

我的应用中有一个路由器，它负责实例化两个集合视图中的一个。假设一个是Questions，另一个是Committees。顶部有两个锚链接分别路由到#questions-view和#committees-view，由路由器拾取并正确切换视图。我有这一切工作。我是否应该使用全局App视图跟踪所有这些元素，例如某些教程如何执行此操作，或者让最高级别的Router足够好？

此外，在我的committees视图中，我会有一个委员会列表，点击后，它会更新页面上的另一个框，其中包含该委员会的问题列表。这不会很困难，但我也想让它触发路由器，而且该视图无法访问Router，我不确定是否应该这样做。例如，我想导航到..#committees/5加载视图，并选择ID为5的委员会，显示所有这些问题。我已经发布了一些JS我正在使用的代码的基础知识。我可以在我的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更改，则currentPage将替换为新页面，否则新的params只会添加到页面Model，在页面视图中您可以监听更改，并处理选择您的网址格式应该类似于＃pageId / param1 = value1; param2 = value2; param3 = value3。此模式允许您添加更多参数并扩展应用程序。

使用Backbone路由器的主/详细信息视图

1 个答案: