在骨幹js中創建視圖和子路由器

Question

我是backbone.js的新手，現在我在backbone.js項目中創建一個菜單。我在HTML文件中使用text.js到環路數據並傳遞到視圖：

<% 
     require(["jquery" , 
     "webconfig", 
     "content" 
     ],function($ , WebConfig, Content){ 
      var content = new Content(); 
      var contentType = deserializeJSONToObj(content.getContentType()); 

      var str = '<ul>'; 
      for(var i = 0; i < contentType.length ; i++){ 
       str += '<div class="ulDiv"><ul class="footerUL"><li>'+contentType[i].Title+'</li>'; 
       for(var j = 0; j < contentType[i].Contents.length ; j++){ 
        str += '<li><a href="'+ contentType[i].Contents[j].ExpiredDayCount + '">' + contentType[i].Contents[j].Title + '</a></li>'; 
       } 
       str += '</ul></div>'; 
      } 
      str += '</ul>'; 
      $(".containerFooterUL").append(str); 
     }); 
    %> 

這是實體模型的結果（注：＃服務/ teaminstall，＃服務/索尼....是動態的）：

<div class="ulDiv"> 
    <ul class="footerUL"> 
     <li>SERVICES</li> 
     <li><a href="#service/teaminstall">Team Install</a></li> 
     <li><a href="#service/sony">Sony Simulator</a></li> 
    </ul> 
    </div> 
    <div class="ulDiv"> 
    <ul class="footerUL"> 
     <li>Account</li> 
     <li><a href="#account/cash">Cash</a></li> 
     <li><a href="#account/cash">Cash</a></li>   
    </ul> 
    </div> 

這是路由器：

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "service" : "serviceAction", 
     "service/serviceTag" : "serviceTagAction", 
     "service/serviceSurvey" : "serviceSurveyAction", 
     "*actions": "defaultRoute" 
    } 
}); 
var app_router = new AppRouter; 
app_router.on('route:serviceAction', function(){ 
    if(window.currentSection) 
     window.currentSection.remove(); 
    window.currentSection = new Service({}); 

    $("#webbodycontainer").html(window.currentSection.$el); 
    window.currentSection.render(); 
}); 

​app_router.on('route:serviceTagAction', function(){ 
    if(window.currentSection) 
     window.currentSection.remove(); 
    window.currentSection = new ServiceTagLookUp({}); 

    $("#webbodycontainer").html(window.currentSection.$el); 
    window.currentSection.render(); 
}); 

問：

• 我可以創建動態子路由器嗎？
• 我可以爲每個路由器創建動態視圖嗎？
• 如果可能，我該如何創建它？

Answer 1

你可以這樣做：

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "service" : "serviceAction", 
     "service/:serviceId" : "dynamicService", 
     "*actions": "defaultRoute" 
    }, 

    dynamicService: function(serviceId) { 
     switch (serviceId) { 
      case 'serviceTag': 
       setCurrentSelection(ServiceTagLookUp); 
       break; 
      case 'serviceSurvey': 
       setCurrentSelection(ServiceSurveyLookUp); 
       break; 
      default: 
       setCurrentSelection(DefaultServiceLookUp); 
       break; 
     } 
    }, 

    setCurrentSelection: function(ServiceClass) { 
     if(window.currentSection) 
      window.currentSection.remove(); 

     window.currentSection = new ServiceClass({}); 

     $("#webbodycontainer").html(window.currentSection.$el); 
     window.currentSection.render(); 
    } 
});