Elm uygulamasını, Elm uygulamasının dışında bulunan mevcut gezinme ile sürmek mümkün mü?

Question

Navigasyonun arka planda oluşturulmaya devam etmesi gereken mevcut bir Rails uygulamasıyla çalışıyorum (karmaşıklık ve zaman sınırlamaları nedeniyle). İstenen sonuç, Elm ile oluşturulmuş sayfalardan bazılarına ve bazı Rails'e sahip olmaktan, karma kullanmadan ve tam sayfa yeniden yüklemelerinden (en azından Elm sayfaları için) olmamak. navigasyon basitleştirilmiş versiyonu şu şekildedir: Ben temelde paketin yeteneği yanlış anlama ediyorum sürece

<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 navigasyon paketi ile denediği

ve elm-route-url muhtemelen ikincisi ile yakın geliyor.

Bunu gerçekleştirmenin bir yolu var mı? Hash etiketlerini kullanarak çalıştım ama onlar olmadan şans yok.

Answer 1

kullanarak karma etiketler

Iyi bana bir kıkırdama.

Html.Events.click yerine kullanabileceğim bu adam benim Helpers.elm dosyamda var.

{-| 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 
      } 

Yani bir a [ overrideClick (NavigateTo "/route"), href "/route" ] [ text "link" ] üzerinde olanak sağlayacak olan orta tıklayarak elemanı yanı sıra navigasyon güncellemek için itme devlet kullanarak.

İhtiyacınız olan şey, JavaScript’te pushState ile çalışan benzer bir şeydir ve orta tıklama deneyimini mahvetmek istemezsiniz. Tarayıcınızın gezinmesini önlemek için tüm <a> s, preventDefault olaylarını ele geçirebilir ve hedefin href'i aracılığıyla yeni durumu başlatabilirsiniz. Olay işleyicisinde navigasyonun <a> s yetkilerini verebilirsiniz. Navigation çalışma zamanı, geçmişte yapılan değişiklikleri harici olarak dinlemeyi desteklemediğinden (bir etki yöneticisi kullanıyor gibi), değeri bir bağlantı noktasından zorlamanız gerekir - Navigation paketini kullanıyorsanız, neyse ki Zaten parçaları var.

Elm ucunda, Navigation programs'dan biriyle birlikte UrlParser.parsePath kullanın. Dahili URL değişiklikleri için kullanılan aynı iletiyi kullanarak abone olmak için bir bağlantı noktası oluşturun.

import Navigation exposing (Location) 


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


type Msg 
    = UrlChange Location 
    | ... 


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

sayfa yükleme sonra bu kullanın:

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)