एचटीएमएल में एम्बेडेड एल्म के साथ एल्म-रिएक्टर का उपयोग करना?

तो मैं एल्म और वेबआरटीसी को एकसाथ कोशिश कर रहा हूं। हालांकि वेबआरटीसी के लिए मुझे जावास्क्रिप्ट में कुछ इंटरऑप चाहिए। इसलिए मैंने WebRTC और main.js. दोनों के लिए आवश्यक स्क्रिप्ट के साथ index.html बनाया है।एचटीएमएल में एम्बेडेड एल्म के साथ एल्म-रिएक्टर का उपयोग करना?

हालांकि, मैं एल्म-रिएक्टर का उपयोग कर रहा हूं। जो बहुत अच्छा है। लेकिन कोई मुख्य नहीं है। मैं इसे एल्म-मेक के साथ बना सकता हूं, लेकिन फिर मुझे इसे मैन्युअल रूप से अपडेट करना होगा।

तो, एल्म-रिएक्टर एम्बेडेड एल्म के साथ मिलकर काम करने का कोई तरीका है?

नोट: मैं एल्म 0.18 का उपयोग कर रहा हूं, जो नवीनतम लेखन के रूप में है।

स्रोत

2016-12-26 The Oddler

यदि आप थोड़ा हैक करना चाहते हैं, तो यह use your own index.html with elm reactor पर पूरी तरह से संभव है। बस एक index.html फ़ाइल में निम्नलिखित रख दिया और रिएक्टर में खोलने (जैसे http://localhost:8000/src/index.html):

<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel="stylesheet" href="styles.css"><!-- Put your styles in folder with index.html --> 
</head> 

<body> 
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #9A9A9A; font-family: &#39;Source Sans Pro&#39;;"> 
    <div style="font-size: 3em;">Building your project!</div> 
    <img src="/_reactor/waiting.gif"> 
    <div style="font-size: 1em">With new projects, I need a bunch of extra time to download packages.</div> 
    </div> 
</body> 

<!-- Fonts and external JS and styles are available, I've put Ace for example --> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/ace.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/theme-chrome.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/worker-lua.js"></script> 

<!-- Put the name of your app here (my sources place in `src` forder) --> 
<script type="text/javascript" src="/_compile/src/YourApp.elm"></script> 

<!-- Removes splash and starts elm app. --> 
<script type="text/javascript"> 
while (document.body.firstChild) { 
    document.body.removeChild(document.body.firstChild); 
} 
runElmProgram(); 
</script> 

</html>

आप बंदरगाहों या झंडे का उपयोग करने, the following example उपयोग करना चाहते हैं (आप Elm.App.fullscreen(flags) आदि की जरूरत पोर्ट का उपयोग करने के लिए है, लेकिन runElmProgram() को त्रुटियों को दिखाएं):

<!doctype html> 
<meta charset=utf-8> 
<title>a title</title> 
<link href=/bundle.css rel=stylesheet> 
<body></body> 
<script src="/_compile/Main.elm"></script> <!-- this will fail in production --> 
<script src="/elm-bundle.js"></script> <!-- this will fail in development --> 
<script> 
var app 
var flags = {} 

try { 
    app = Elm.App.fullscreen(flags) 

    /* app.ports is now available */ 
} catch (e) { 
    // this will run in case there are compile errors: 
    var stylesheets = document.querySelectorAll('link') 
    for (var i = 0; i < stylesheets.length; i++) { 
    stylesheets[i].parentNode.removeChild(stylesheets[i]) 
    } 
    runElmProgram() 
} 
</script>

स्रोत

2016-12-28 17:23:11

क्या किसी ने इस विधि का उपयोग कर इतिहास की खोज करने में कोई भाग्य लिया है? मैं अपने ऐप के div के साथ '

class="elm-overlay"

' के सामने बैठा हूं, जिससे बातचीत करना असंभव हो गया है। शायद यह एक अलग सवाल के रूप में पूछने लायक है? – Charlie

@ चार्ली दिलचस्प, मैंने अपनी पुरानी परियोजनाओं में से एक को दो बार चेक किया और यह मेरे लिए काम करता है। मेरा अनुमान है कि आपके पास जेड-इंडेक्स मुद्दे हैं। '.elm-overlay {z-index: 100;}' (या जो भी आप उपयोग करते हैं उससे ज्यादा कुछ भी) मदद करनी चाहिए। –

हाँ, उसने ऐसा किया! यह सुनिश्चित नहीं है कि यह क्यों हो रहा था, लेकिन यह एक अच्छा और सरल समाधान है। धन्यवाद! – Charlie

आज के रूप में (0.18.0), आधिकारिक तौर पर आप कस्टम एचटीएमएल में अपने आवेदन को एम्बेड करने के लिए एल्म-रिएक्टर का उपयोग नहीं कर सकते हैं। अतिरिक्त सेटअप के बिना एल्म-रिएक्टर के साथ पोर्ट सब्सक्रिप्शन भी असंभव है।

Create Elm App या alternatives.

स्रोत

2016-12-26 16:44:31 halfzebra

आह शर्म की बात है, लेकिन स्पष्ट उत्तर के लिए धन्यवाद! –

@TheOddler मदद करने में खुश! मैं एल्म ऐप बना रहा हूं, अगर आपको कोई परेशानी होगी तो मुझे ट्विटर या ढीले पर एक प्रश्न के साथ मारने के लिए स्वतंत्र महसूस करें। – halfzebra

की तरह कुछ का उपयोग कर आप elm-live को देखने के लिए चाहते हो सकता है पर विचार करें।

यह वही विकल्प है जो elm-reactor है, लेकिन आप अपने index.html का उपयोग कर सकते हैं।

स्रोत

2016-12-27 13:52:53

एचटीएमएल में एम्बेडेड एल्म के साथ एल्म-रिएक्टर का उपयोग करना?

उत्तर

संबंधित मुद्दे