Question

我是backbone.js的初学者我的页面导航如下所示：

enter image description here

左侧导航定义了四种视图类型，而顶部导航应更新数据模型并重新渲染当前视图（这就是我的想法）。
我想允许用户根据他/她的个人偏好为当前视图和类别添加书签（并且可能将设置存储在浏览器的本地存储中）。
这两个菜单可以互换使用，这意味着用户可以决定使用当前类别的模型显示不同的视图，并且用户可以在当前视图中选择不同的类别。

我无法确定如何以稳定的方式为此配置路由器请注意，此路径后面可能还有其他参数，例如基于profile_id在地图上显示活动标记。

现在，我有想法做这样的事情：

var AppRouter = Backbone.Router.extend({
        routes: {
            ":view/:category": "aggregatefunction" 
        }
    });

但我不确定这是否会引导我达到我的需要由于我想要交替使用这些菜单并使它们可收藏，我已经开始坚持创建链接了。

您能否就结构给我一些建议，并告诉我潜在的陷阱，以帮助我在路上？当然也欢迎任何补充建议谢谢

修改
对于奖金，我想再读一些意见我仍然在动态地构建和调整菜单锚标签中的hrefs时遇到一些麻烦，同时能够触发事件（更改类别/或更改视图）。我正在寻找这个问题最稳定的解决方案如果可能的话，每个插图都附有一些代码。
谢谢。

Answer 1

嗯，我认为一种看待这个问题的方法是，最重要的部分是视图，而类别实际上不那么重要，它们可以被视为过滤器。有一个View和没有类别（看到'All'）甚至是有意义的，但在这里我只是猜测你应用程序可以做什么......

我之所以这样说是因为我假设您将拥有4个主干视图（地图，直播，RSS等），但没有针对这些类别的特定视图。所以在切换类别时，你实际上并没有切换视图，只是用不同的参数重新渲染它，对吗？

然后对我来说，路由器应该是这样的：

'map/:category': '_map'
'rss/:category': '_rss'
...

每个主视图的一个路由，以及作为回调参数的类别。然后人们可以为#map / events或#rss / places_to_eat等网址添加书签，但在内部，您可以管理4个干净的视图。

稍后，使用splats会更容易同时显示多个类别的视图（splats以路径定义中的*开头）。

只是我的两分钱！

Answer 2

我总是发现Backbone的路由器因为这个原因而变得非常糟糕：它是一维的。我写了一个jQuery插件，提供依赖和自变量。请查看http://plugins.jquery.com/uriAnchor/。使用模型和视图构建可收藏的应用程序就像你已经概述的那样非常简单，尽管我不会浪费我的时间使用Backbone。如果您想了解更多信息，请与我们联系。无论如何，我希望这会有所帮助。

Answer 3

根据@enders的回复+评论，我最终创建了一个中间模型：这是一个演示（尚未显示视图，但管理动态路由）：http://www.zwoop.be/bb/index.php

define([
  'jquery',
  'underscore',
  'backbone',
], function($, _, Backbone, Text, Leftnav){
  var Navstate_Model = Backbone.Model.extend({
      defaults: {
            view: '',
            category: ''
        },
        initialize: function(){
        }
  });
  // Our module now returns our view
  return Navstate_Model;
});

至于路线：

define([
  'jquery',
  'underscore',
  'backbone',
], function($, _, Backbone){
  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
      '': 'landing_page', 
      ':views/:categories': 'showView',

      // Default
      '*actions': 'defaultAction'
    }, 
    landing_page: function(){
        app.models.navstate_Model.set("view", "map"); 
        app.models.navstate_Model.set("category", "events");         
    }, 
    showView: function(view, category){
        app.models.navstate_Model.set("view", view); 
        app.models.navstate_Model.set("category", category); 
        app.views.leftnav_View.render();
        app.views.topnav_View.render(); 
        console.log(view + ";" + category); 
    }
  });

用于二维菜单的骨干路由器：建议

3 个答案: