從數據庫durandal中加載子路由器

Question

我試圖從我的數據庫starterkit中創建durandal 2中的子路由，但沒有成功。

雖然我成功地用靜態內容渲染，如下所示：

define(['plugins/router', 'knockout'], function (router, ko) { 
var childRouter = router.createChildRouter() 
    .makeRelative({ 
     moduleId: 'sectionGroups', 
     fromParent: true 
    }).map([ 
     { route: ['', 'child1'], moduleId: 'pages/child1', title: 'child1', nav: true }, 
     { route: 'child2: moduleId: 'pages/child2', title: 'child2', nav: true }, 
     { route: 'child3', moduleId: 'pages/child3', title: 'child3', nav: true } 
    ]).buildNavigationModel(); 

return { 
    router: childRouter 
}; 
}); 

不過，我一直無法動態地輸出從數據庫菜單。我在做什麼錯嗎？請看我的代碼如下

define(['plugins/router', 'knockout','services/oasisManager', 'services/logger'], function (router, ko, om, logger) { 

var pageRoutes = getPageRoutes(); 

var childRouter = router.createChildRouter() 
    .makeRelative({ 
     moduleId: 'sectionGroups', 
     fromParent: true 
    }) 
    .map(pageRoutes) 
    .buildNavigationModel(); 

function getPageRoutes() { 
    var pageRoutes = []; 
    om.getOasis(134).done(function() { 
     ko.utils.arrayForEach(om.activeOasis.PageRoutes, function(item) { 
      var nav = true; 
      if (item.Route == '') { 
       nav = false; 
      } 
      pageRoutes.push({ 
       route: item.Route, 
       moduleId: item.ModuleId, 
       title: item.Title, 
       nav: nav 
      }); 
     }); 
    }); 
    return pageRoutes; 
} 

return { 
    router: childRouter 
}; 
}); 

Html看起來幾乎相同。請幫助

<div class="container-fluid knockout-samples"> 
<div class="row-fluid"> 
    <div class="span2 well"> 
     <ul class="nav nav-list"> 
      <li class="nav-header">Basic Examples</li> 

      <!--ko foreach: router.navigationModel--> 
      <li data-bind="css: { active: isActive }"> 
       <a data-bind="attr: { href: hash }, text: title"></a> 
      </li> 
      <!--/ko--> 
     </ul> 
    </div> 
    <div class="span10"> 
     <!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko--> 
    </div> 
</div> 

Answer 1

我想在代碼中發生的事情是getPageRoutes返回一個空數組。它應該返回一個路由列表的承諾。你可能需要這樣的東西。

function getPageRoutes() { 
    return om.getOasis(134).done(function(routes) { 
     var pageRoutes = []; 
     ko.utils.arrayForEach(routes, function(item) { 
      var nav = true; 
      if (item.Route == '') { 
       nav = false; 
      } 
      pageRoutes.push({ 
       route: item.Route, 
       moduleId: item.ModuleId, 
       title: item.Title, 
       nav: nav 
      }); 
     }); 
     return pageRoutes; 
    }); 
} 

我提出的assumtion是om.getOasis(134)將返回的承諾爲路由的列表。

不知道這是否會有所幫助，但這是我在我的durandal應用程序中執行類似於您想要實現的功能的功能。我使用Q promises library來處理對webapi的異步調用。

define(['plugins/http', 'services/logger'], function (http, logger) { 
    "use strict"; 
    var getRoutes = function() { 
     return http.get("routes/availableRoutes").then(function (data) { 
      logger.log("Routes Loaded", data, 'services/routes', false); 
      return data; 
     }); 
    }; 
    var routes = { 
     getRoutes: getRoutes 
    }; 
    return routes; 
}); 

調用代碼然後變成如下所示。

return routes().then(function (availableRoutes) { 
    return router.makeRelative({ 
     moduleId: 'sectionGroups', 
     fromParent: true 
    }) 
    .map(availableRoutes) 
    .buildNavigationModel() 
    .activate(); 
});