Question

我是backbone.js的新手，现在我在backbone.js项目中创建了一个菜单。我使用text.js循环html文件中的数据并传入视图：

   <%
        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);
        });
    %>

这是模拟结果（注意：#service / teaminstall，＃service / sony ....是动态的）：

  <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();
    }
 });

在骨干网中创建视图和子路由器

1 个答案: