क्या एल्म ऐप के बाहर निर्मित मौजूदा नेविगेशन के साथ एल्म ऐप ड्राइव करना संभव है?

Question

मैं मौजूदा रेल ऐप के साथ काम कर रहा हूं जहां नेविगेशन बैकएंड (जटिलता और समय सीमाओं के कारण) पर निर्माण जारी रखना चाहिए। लक्षित परिणाम एल्म के साथ उत्पन्न कुछ पेज हैं, और कुछ रेल के साथ, कोई हैश का उपयोग नहीं करते हैं, और कोई पूर्ण पृष्ठ पुनः लोड नहीं होता है (कम से कम एल्म पृष्ठों के लिए)। नेविगेशन की सरलीकृत संस्करण इस तरह दिखता है:

<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 के साथ काम करता है, और आप मध्य-क्लिक अनुभव को बर्बाद नहीं करना चाहते हैं। ब्राउज़र को नेविगेट करने से रोकने के लिए, और लक्ष्य के href के माध्यम से नए राज्य में धक्का देने के लिए आप सभी <a> s, preventDefault को हाइजैक कर सकते हैं। आप इवेंट हैंडलर में नेविगेशन के <a> एस को प्रतिनिधि दे सकते हैं। चूंकि Navigation रनटाइम इतिहास परिवर्तनों को बाहरी रूप से सुनने में सहायता नहीं करता है (बल्कि यह एक प्रभाव प्रबंधक का उपयोग प्रतीत होता है), आपको पोर्ट को पोर्ट के माध्यम से धक्का देना होगा - सौभाग्य से यदि आप Navigation पैकेज का उपयोग कर रहे हैं, तो आपको पहले से ही टुकड़े हैं।

एल्म अंत में, का उपयोग Navigation programs में से किसी एक के साथ संयोजन में करें। उसी संदेश का उपयोग करने के लिए सदस्यता लेने के लिए एक पोर्ट बनाएं जिसका उपयोग इसके आंतरिक यूआरएल परिवर्तनों के लिए किया जाता है।

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)