Sử dụng lò phản ứng elm với Elm được nhúng trong HTML?

Vì vậy, tôi đang thử ra Elm và WebRTC với nhau. Tuy nhiên đối với WebRTC tôi cần một số interop để javascript. Vì vậy, tôi đã tạo một index.html với tập lệnh cần thiết bao gồm, cho cả WebRTC và main.js.Sử dụng lò phản ứng elm với Elm được nhúng trong HTML?

Tuy nhiên, tôi đang sử dụng lò phản ứng elm. Đó là siêu đẹp. Nhưng không có main.js. Tôi có thể tạo nó bằng elm-make, nhưng sau đó tôi sẽ phải tự cập nhật nó.

Vì vậy, có cách nào để lò phản ứng elm hoạt động cùng với elm được nhúng không?

Lưu ý: Tôi đang sử dụng Elm 0,18, mới nhất bằng văn bản.

Nguồn

2016-12-26 The Oddler

Nếu bạn sẵn sàng để hack một chút, nó hoàn toàn có thể để use your own index.html with elm reactor. Chỉ cần đặt sau đây trong một file index.html và mở nó trong lò phản ứng (ví dụ 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>

Nếu bạn muốn sử dụng cổng hoặc cờ, sử dụng the following example (bạn cần Elm.App.fullscreen(flags) vv để sử dụng cảng, nhưng runElmProgram() để hiển thị lỗi):

<!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>

Nguồn

2016-12-28 17:23:11

Có ai có may mắn khám phá lịch sử sử dụng phương pháp này không? Tôi kết thúc với div của ứng dụng của tôi ngồi ở phía trước của '

class="elm-overlay"

' làm cho nó không thể tương tác với. Có lẽ đây là giá trị yêu cầu như một câu hỏi riêng biệt? – Charlie

@Charlie Thú vị, tôi chỉ cần kiểm tra lại một trong những dự án cũ của tôi và nó hoạt động cho tôi. Tôi đoán là bạn có vấn đề về chỉ mục z. '.elm-overlay {z-index: 100;}' (hoặc bất kỳ thứ gì cao hơn những gì bạn sử dụng) sẽ giúp ích. –

Vâng, điều đó đã làm được! Không chắc tại sao nó lại xảy ra, nhưng đó là một giải pháp tuyệt vời và đơn giản. Cảm ơn! – Charlie

Kể từ hôm nay (0.18.0), chính thức bạn không thể sử dụng elm-reactor để nhúng ứng dụng của bạn vào HTML tùy chỉnh. Bạn cũng không thể có đăng ký cổng với elm-reactor mà không cần thiết lập bổ sung.

Xem xét sử dụng một cái gì đó giống như Create Elm App hoặc alternatives.

Nguồn

2016-12-26 16:44:31 halfzebra

Ah xấu hổ, nhưng cảm ơn câu trả lời rõ ràng! –

@TheOddler rất sẵn lòng trợ giúp! Tôi đang duy trì Create Elm App, cảm thấy tự do để đánh tôi với một câu hỏi trên twitter hoặc slack nếu bạn sẽ có bất kỳ khó khăn. – halfzebra

Bạn có thể muốn nhìn vào elm-live.

Nó có các tùy chọn tương tự mà elm-reactor có, nhưng bạn có thể sử dụng index.html của riêng mình.

Nguồn

2016-12-27 13:52:53

Sử dụng lò phản ứng elm với Elm được nhúng trong HTML?

Trả lời

Các vấn đề liên quan