Backbone js router - 组织视图的更好方法

时间:2013-07-06 19:25:17

标签: javascript backbone.js

这是我用骨干路由器组织4个视图和4个链接的方法

var LinksRouter = Backbone.Router.extend({
    routes:{
        "classes" : "classes",
        "profile" : "profile",
        "reportcard" : "reportcard",
        "newclasses" : "newclasses",
    },
    classes : function(){
        $(".viewable").hide();
        $(".clickable").removeClass("active");
        $("#classes-view").show();      
        $("#classes-link").addClass("active");                                  
    },
    profile : function(){
        $(".viewable").hide();
        $(".clickable").removeClass("active");
        $("#profile-view").show();      
        $("#profile-link").addClass("active");                                  
    },
    reportcard : function(){
        $(".viewable").hide();
        $(".clickable").removeClass("active");
        $("#reportcard-view").show();       
        $("#reportcard-link").addClass("active");                                   
    },
    newclasses : function(){
        $(".viewable").hide();
        $(".clickable").removeClass("active");
        $("#newclasses-view").show();       
        $("#newclasseslink").addClass("active");                                    
    }                       
});
var links = new LinksRouter();
Backbone.history.start();

看起来单调乏味而且效率不高。使用骨干js有更好的方法吗?

1 个答案:

答案 0 :(得分:2)

我确信有很多方法......怎么样:

var LinksRouter = Backbone.Router.extend({
    routes:{
        ":subview" : "viewSet",  // or "/:subview" ?
    },
    viewSet : function(subview){
        $(".viewable").hide();
        $(".clickable").removeClass("active");
        $("#"+subview+"-view").show();      
        $("#"+subview+"-link").addClass("active");                                  
    }
});
var links = new LinksRouter();
Backbone.history.start();