ruby-on-rails - 是否可以使用在 Elm 应用程序之外构建的现有导航来驱动 Elm 应用程序？

Question

我正在使用现有的 Rails 应用程序，必须继续在后端构建导航(由于复杂性和时间限制)。预期的结果是使用 Elm 生成一些页面，而使用 Rails 生成一些页面，不使用散列，并且不重新加载整个页面(至少对于 Elm 页面而言)。导航的简化版本如下所示:

<nav>
  <a href="rails-page-1">...
  <a href="rails-page-2">...
  <a href="elm-page-1">...
  <a href="elm-page-2">...
</nav>

<div id="elm-container"></div>

我已经尝试过 Elm 导航包和 elm-route-url ，可能与后者接近，除非我从根本上误解了包的能力。

有没有办法做到这一点？我已经使用哈希标签让它工作了，但没有它们就没有运气。

Answer 1

using hash tags

好吧，你被我逗笑了。

我的 Helpers.elm 中有这个人我可以用来代替 Html.Events.click 的文件.

{-| Useful for overriding the default `<a>` behavior which
   causes a refresh, but can be used anywhere
-}
overrideClick : a -> Attribute a
overrideClick =
    Decode.succeed
        >> onWithOptions "click"
            { stopPropagation = False
            , preventDefault = True
            }

所以在 a [ overrideClick (NavigateTo "/route"), href "/route" ] [ text "link" ]这将允许中键单击元素以及使用推送状态来更新导航。

您需要的是与 pushState 一起使用的 JavaScript 上的类似内容。 ，并且您不想破坏中键单击体验。你可以劫持所有 <a>年代， preventDefault在其事件中停止浏览器导航，并通过目标的 href 推送新状态。您可以委托(delegate)导航的 <a> s 在事件处理程序中。由于 Navigation运行时不支持从外部监听历史更改(它似乎在使用效果管理器)，您必须通过端口推送值——幸运的是，如果您使用的是 Navigation包，你应该已经有了。

在 Elm 端，使用 UrlParser.parsePath 与 Navigation programs 之一结合使用.使用用于其内部 url 更改的相同消息创建要订阅的端口。

import Navigation exposing (Location)


port externalPush : (Location -> msg) -> Sub msg


type Msg
    = UrlChange Location
    | ...


main =
    Navigation.program UrlChange
        { ...
        , subscriptions : \_ -> externalPush UrlChange
        }

页面加载后，使用:

const hijackNavClick = (event) => {
  // polyfill `matches` if needed
  if (event.target.matches("a[href]")) {
    // prevent the browser navigation
    event.preventDefault()
    // push the new url
    window.history.pushState({}, "", event.target.href)
    // send the new location into the Elm runtime via port
    // assuming `app` is the name of `Elm.Main.embed` or
    // whatever
    app.ports.externalPush.send(window.location)
  }
}


// your nav selector here
const nav = document.querySelector("nav")


nav.addEventListener("click", hijackNavClick, false)