सीएमडी बस एएमएम

Question

में एक नए वेबपेज पर जाने के लिए क्या लिंक पर क्लिक करने के समान ही एल्म में एक नए वेबपेज पर जाने का कोई तरीका है?

मेरे पास button है जो क्लिक होने पर मैं उपयोगकर्ता को किसी अन्य वेबपृष्ठ पर ले जाना चाहता हूं। मुझे पता है कि मैं इसे a तत्व बना सकता हूं और इसे एक बटन की तरह स्टाइल करने के लिए सीएसएस का उपयोग कर सकता हूं। हालांकि, मैं सामग्री डिजाइन लाइट बटन बनाने के लिए elm-mdl का उपयोग कर रहा हूं और मैं यह जानना चाहता हूं कि इस पर ध्यान दिए बिना।

मैं बनाने एक GoTo StringMsg और Button.onClick (GoTo "newpage.html") साथ बटन पर क्लिक करें पर फायरिंग कि कोशिश की है, लेकिन मैं नहीं जानता कि क्या Cmd के लिए डाल करने के लिए। मैंने कोशिश की है:

GoTo url -> 
    (model, Navigation.newUrl url) 

लेकिन सिर्फ पता पट्टी परिवर्तन में URL बन जाता है कि, उपयोगकर्ता वास्तव में नया url करने के लिए जाना नहीं है ... मैं एक बंदरगाह का उपयोग कर सकते हैं और के लिए कुछ सरल जावास्क्रिप्ट कोड लिखने window.location.href = 'newpage.html' पर कॉल करें, मुझे उम्मीद है कि ऐसा करने के लिए एक सरल मानक एल्म तरीका है।

Answer 1

आपके वर्तमान स्थिति के लिए एक बंदरगाह का उपयोग करना होगा और जावास्क्रिप्ट को आपके लिए ऐसा करने के लिए मजबूर करना होगा। यह लाइब्रेरी अज्ञेयवादी है। कारण मैं ऐसा करने का सुझाव देना चाहता हूं कि अगर <a> टैग स्वीकार्य नहीं है और आप Cmd msg चाहते हैं, तो यह आपको बिल्कुल वही देगा।

मैं एक मूल उदाहरण शामिल करूंगा जो आप जो कर रहे हैं उससे काफी आसानी से संबंधित होना चाहिए।

आपको मॉड्यूल घोषित करने के लिए मॉड्यूल बनाने और port जोड़कर एक मॉड्यूल बनाना चाहिए जो बंदरगाहों को स्वीकार करता है या आपके वर्तमान में से किसी एक को परिवर्तित करता है। आप इसे एक ही तरीके से करने के लिए मौजूदा मॉड्यूल को भी संशोधित कर सकते हैं।

इस के लिए एक नमूना मॉड्यूल होगा

port module OpenWindow exposing (openWindow) 

port openWindow : String -> Cmd msg 

अब आप अपने कोड में अपने बंदरगाह घोषणा की है। आप इसे किसी फ़ंक्शन में लपेटकर जहां आप चाहते हैं उसका उपयोग कर सकते हैं या जब आप मॉड्यूल ओपनविंडो से इसे आयात करते हैं तो आप अपने अपडेट फ़ंक्शन से openWindow पर कॉल कर सकते हैं।

अगला आपको अपना पोर्ट जावास्क्रिप्ट कोड जोड़ना चाहिए।

अपने index.js या अपने <script> टैग में आप हमेशा की तरह

var Elm = require('../Main'); 
var node = document.getElementById('main'); 
var app = Elm.Main.embed(node); 

या फिर भी आप यह कर, बस

app.ports.openWindow.subscribe(function(newSite) { 
    window.open(newSite); 
}); 

तुम बस की तरह कोड के आधार पर आपके मूल उदाहरण के लिए इस जोड़ना होगा जोड़ने जहां परिभाषित

GoTo url -> 
    (model, openWindow "newpage.html") 

व्यक्तिगत रूप से, मैं पुनः प्राप्त नहीं करता और अक्सर ऐसा करना क्योंकि यह वास्तव में सबसे अच्छा तरीका नहीं है यदि आमतौर पर a [] [] कथन काम करेगा।

आप शायद अपने बटन पर एक एंकर टैग जोड़ सकते हैं और इसे इस तरह संदर्भित कर सकते हैं।

नोट: window.open() फ़ंक्शन के बारे में अतिरिक्त जानकारी here मिल सकती है।

Answer 2

हम इतने बूटरस्ट्रैप को एंकरों के बटन लिंक स्टाइल को सक्षम करने के लिए उपयोग किए जाते हैं, इसलिए आप सवाल एक अच्छा है।

मैंने क्रोम devtools के साथ खेला और एल्म-एमडीएल साइट पर एक एंकर लिंक के साथ एक बटन लपेटा, और यह आप चाहते हैं के रूप में पुनर्निर्देशित लग रहा था।

तुम भी तरह कुछ के लिए अपने प्रश्न का शीर्षक बदलने के लिए चाहते हो सकता है - एक एल्म-एमडीएल बटन से नए वेब पेज से लिंक करें - के रूप में वहाँ कुछ भी नहीं सामान्य

Answer 3

में एल्म में लिंक रोक elm-history के Location.assign की तरह लगता है है पुनर्निर्देशन प्राप्त करता है।

यह "प्रदत्त यूआरएल पर संसाधन लोड करेगा, या विफलता पर एक त्रुटि संदेश प्रदान करेगा"। "यह केवल शीर्षक पट्टी में यूआरएल नहीं बदलता है"।

Answer 4

यह काम करता है (.18 में), लेकिन यह इतना सुंदर नहीं है:

देशी/Navigation.js

var _user$project$Native_Navigation = function() { 

function setLocation(n) 
{ 
    document.location.href = n; 
} 

return { 
    setLocation: setLocation, 
}; 

}(); 

कहा जाता है अपनी परियोजना में एक फ़ाइल करें कि आपके एल्म-पैकेज में जोड़े .json:

"native-modules": true, 

अपने कोड में:

import Native.Navigation 

और update फ़ंक्शन से Native.Navigation.setLocation "/wherever" लौटाएं।

जावास्क्रिप्ट फ़ंक्शन वास्तव में एल्म कॉलबैक के रूप में व्यवहार नहीं करता है, लेकिन चूंकि आप उस पृष्ठ से दूर रीडायरेक्ट करते हैं जो किसी समस्या का बहुत बड़ा नहीं होना चाहिए। मुझे लगता है कि यह एक उचित रूप से प्रकाशित एल्म मॉड्यूल के रूप में काम कर सकता है ...

Answer 5

यह कुछ गंदे हैक आप उपयोग कर सकते हैं:
एल्म शैली विशेषता के लिए जावास्क्रिप्ट का एक-लाइनर आपूर्ति करें। Html.Attributes लाइब्रेरी से attribute का उपयोग करना।

redirectTo : String -> Attribute msg 
redirectTo destinationUrl = 
    attribute 
    "onclick" 
    ("window.location.href = ' ++ destinationURL ++ "'") 

जो तुम इस तरह किसी भी तत्व को जोड़ सकते हैं:

आप अपनी खुद की सहायक रीडायरेक्ट करता है बना सकता है

button 
    [ class "mdl-button", redirectTo "https://google.com" ] 
    [ text "Click to leave" ] 

Answer 6

पैकेज elm-lang/navigation की मदद से आप के साथ सीधे इन दिनों ऐसा करते हैं, फ़ंक्शन load:

GoTo url -> 
    (model, Navigation.load url)