防止代码javascript部分中的锚标记刷新Elm单页应用程序中的页面？_Elm

防止代码javascript部分中的锚标记刷新Elm单页应用程序中的页面？

elm

防止代码javascript部分中的锚标记刷新Elm单页应用程序中的页面？,elm,Elm,我试图在单页应用程序中实现无散列URL（如/somePage）我现在正在使用onPreventDefaultClickfrom，以防止锚链接刷新代码中我的elm部分中单击时的页面问题是，我在页面上嵌入了一个javascript编辑器。而且，在那里也会有数量不可预测的链接（链接到应用程序上具有不同URL的不同功能）。如何防止他们刷新页面。但也允许他们运行命令并在之后更改url 这对于像/#/somePage这样的散列URL来说很容易。在当前的实现中，我只是在代码的JS/editor部分的锚定标

我试图在单页应用程序中实现无散列URL（如

/somePage

）

我现在正在使用

onPreventDefaultClick

from，以防止锚链接刷新代码中我的elm部分中单击时的页面

问题是，我在页面上嵌入了一个javascript编辑器。而且，在那里也会有数量不可预测的链接（链接到应用程序上具有不同URL的不同功能）。如何防止他们刷新页面。但也允许他们运行命令并在之后更改url

这对于像

/#/somePage

这样的散列URL来说很容易。在当前的实现中，我只是在代码的JS/editor部分的锚定标记中对url进行了哈希处理，这只是通过更改触发我的

PageChanged页面

消息的url来实现的。为此，我在elm中使用了

谢谢

修补编辑器以更改其生成的链接的行为。e、 g.让编辑器添加一个

单击

处理程序，该处理程序通过端口将事件url发送到Elm，并返回

false

（取消事件）

下面是一个简单的例子，说明了这一点：

梅因·埃尔姆

port module Main exposing (..)

import Html exposing (..)


main =
    program
        { init = ( "", Cmd.none )
        , update = \msg _ -> (msg, Cmd.none )
        , view = view
        , subscriptions = \_ -> navigateTo identity
        }


view m =
    text <| "received: " ++ m


port navigateTo : (String -> msg) -> Sub msg

端口模块主暴露（…）
导入Html公开（…）
主要=
程序
{init=（“”，Cmd.none）
，update=\msg\uu->（msg，Cmd.none）
，视图=视图
，订阅=\ \->导航到标识
}
视图m=
文本消息）->子消息

和index.html

<html>
<head>
  <style>
    html {
      background: #F7F7F7;
      color: red;
    }
  </style>
</head>
<body>
  <div> <a href="/first/link" onclick="return sendToElm(this);">First Link</a></div>
  <div> <a href="/second/link" onclick="return sendToElm(this);">Second Link</a></div>
  <script>
    var app = Elm.Main.fullscreen();
    sendToElm = function (el){
      app.ports.navigateTo.send(el.href);
      return false;
    }
  </script>
</body>
</html>


html{
背景：#F7F7F7；
颜色：红色；
}
var app=Elm.Main.fullscreen（）；
sendToElm=函数（el）{
app.ports.navigateTo.send（el.href）；
返回false；
}

如果我的问题不够清楚，一定要告诉我。我担心这样的事情会发生。但是我想如果不攻击编辑，就没有办法做到这一点。谢谢。如果您能够正确识别由编辑器创建的链接（例如，如果链接具有某个类，您可能能够检测到它们插入DOM并添加上述事件处理程序），那么您可以使用变异观察程序自动添加事件处理程序。