在 Aurelia 中创建 NavigationStrategy

Question

我正在尝试使用 Aurelia 作为自定义 Wordpress 主题的平台。

我想做的是在 Wordpress 中定义我的导航菜单，使用 Wordpress 菜单插件通过 Wordpress API 将菜单显示为 JSON 字符串，然后构建导航菜单在奥雷利亚。

到目前为止我发现的所有内容都涉及创建一个简单的单行菜单。

有没有人这样做过或者可以指出正确的方向？

Answer 1

由于您使用 server-side 数据来构建导航菜单，您不妨让服务器完成繁重的工作，并让它为您的路由器生成 ready-to-use 配置。

让您的插件像这样生成 JSON：

{
  "routes": [
    {
      "route": "\"...\"",
      "moduleId": "\"...\"",
      "settings": {
        "childRoutes": [
          {
            "route": "\"...\"",
            "moduleId": "\"...\"",
          }
        ]
      }
   ]
}

然后在你的根视图模型的 configureRouter 中你可以做这样的事情：

async configureRouter(config, router) {
  const resp = await http.fetch("api/menu-plugin-uri");
  const json = await resp.json();
  config.map(json.routes);
}

子路由存储在配置的 settings 对象中，这意味着我们可以用它来构建导航菜单，我们可以像这样在子路由中访问它：

configureRouter(config, router) {
  const parentConfig = router.parent.currentInstruction.config;
  config.map(parentConfig.childRoutes);
}

NavModel 和 isActive 以及其他所有内容并没有给您带来很好的体验，但就目前的嵌套导航菜单而言，这已经是最好的了。

我实际上正在 plugin 自己尝试解决其中的一些限制，但尚未准备好投入生产。

在 Aurelia 中创建 NavigationStrategy

Creating a NavigationStrategy in Aurelia

wordpress

aurelia