动态创建骨干路由

时间:2013-04-03 14:02:57

标签: backbone.js backbone-routing

这是我的骨干路由器:

var Router = Backbone.Router.extend({
    routes: {
       "": "home",
       "home": "home",
       "about": "about",
       "works": "works",
       "work/:id" : "work",
       "news": "news",
       "contact": "contact"
    },

    initRoutes: function(e) {       
        this.on('route:home', function() {
            page.activepage = "home";
            page.render();
        }); 
        this.on('route:about', function() {
            page.activepage = "about";
            page.render();
        }); 
        this.on('route:works', function() {
            page.activepage = "works";
            page.render();
        }); 
        this.on('route:work', function(id) {
            page.activepage = "works";
            page.param = id;
            page.render();
        }); 
        this.on('route:news', function() {
            page.activepage = "news";
            page.render();
        });
        this.on('route:contact', function() {
            page.activepage = "contact";
            page.render();
        });
    },
    initialize: function(){
        var self = this;
        Backbone.history = Backbone.history || new Backbone.History({});
        root = "kitchenV3/"+lang;
        var enablePushState = true;
        var pushState = !! (enablePushState && window.history && window.history.pushState);
        Backbone.history.start({
            pushState: pushState,
            root: root
        });
        self.initRoutes();
    }
});

因为你可以看到我的所有路线基本上做同样的事情(渲染内容取决于路线名称和参数)。那么如何重写,, this.on(route:about)...“以避免递归?

1 个答案:

答案 0 :(得分:9)

使用这些路线:

routes: {
  '': 'myFunc',
  ':mod(/)': 'myFunc',
  ':mod/:id(/)': 'myFunc'
},
myFunc: function(mod, id) {
  page.activepage = mod || 'home';
  if(id) page.param = id;
  page.render();
}

删除initRoutes。这应该可以正常工作。