是否有可能在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-route-url，可能与后者即将关闭，除非我从根本上误解了包的能力。

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

Answer 1

使用哈希标签

那么你有一个轻笑了我。

我有这个人在我的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> s，preventDefault以停止浏览器导航，并通过目标的href推入新状态。您可以将导航的<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)