コードのjavascript部分のアンカータグが、Elmシングルページアプリケーションのページを更新しないようにしますか？

シングルページアプリケーションでハッシュレスURL（/somePageなど）を実装しようとしています。コードのjavascript部分のアンカータグが、Elmシングルページアプリケーションのページを更新しないようにしますか？

hereのonPreventDefaultClickを使用しています。これは、アンカーリンクが、コードのmy elm部分のクリックでページをリフレッシュするのを防ぐためです。

問題は、JavaScriptのエディタがページに埋め込まれていることです。そして、そこには、（URLごとに異なる機能にリンクする）予測不可能な数のリンクがあります。ページの更新を防ぐ方法を教えてください。しかし、それらもコマンドを実行し、その後にURLを変更することができます。

これは、ハッシュドURLが/#/somePageのように簡単でした。現在の実装では、単純に私のPageChanged Pageメッセージを起動するURLを変更するだけで動作する、コードのJS /エディタ部分のアンカータグにハッシュ - URLを単に置いています。この目的のために、私はnavigation packageをelmで使用しています。

ありがとうございます！

出典

2017-05-07 abhinav

十分にはっきりしていない。 – abhinav

エディタにパッチを適用して、生成されたリンクの動作を変更します。例えばエディタに、イベントurlをポート経由でElmに送信し、false（イベントをキャンセル）を返すclickハンドラを追加させます。ここで

はこのことを示し、最小限の例です：

Main.elm

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

と私の質問なら、私に知らせてください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>

Ellie link

出典

2017-05-07 07:34:28 pdamoc

私はこのような何かをする必要があることを恐れていました。しかし、私はエディタをハックすることなくそれを行う方法がないと思う。ありがとうございました。 – abhinav

エディタで作成されたリンクを適切に識別できる場合は、イベントハンドラを自動的に追加することができます（たとえば、リンクに特定のクラスがある場合は、DOMへの挿入を検出できる可能性があります上記のイベントハンドラを追加してください。 – pdamoc

これもうまくいくはずです。 – abhinav

コードのjavascript部分のアンカータグが、Elmシングルページアプリケーションのページを更新しないようにしますか？

答えて

関連する問題