用Elm反应器将Elm嵌入HTML中？
用Elm反应器将Elm嵌入HTML中？
提问于 2016-12-26 16:22:39
所以我要一起试试埃尔姆和WebRTC。然而，对于WebRTC，我需要一些javascript的互操作。因此，我为WebRTC和main.js创建了一个包含所需脚本的main.js。
不过，我用的是榆树反应堆。这太好了。但是没有main.js。我可以用elm-make创建它，但是我必须手动更新它。
那么，有什么方法可以让榆树反应堆和嵌入式榆树一起工作呢？
注:我正在使用榆树0.18，最新的写作。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-12-28 17:23:11
如果你愿意黑一点，用你自己的index.html和elm反应堆是完全有可能的。只需将以下内容放入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: 'Source Sans Pro';">
<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>如果您想使用端口或标志，请使用下面的示例 (您需要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>Stack Overflow用户
发布于 2016-12-27 13:52:53
您可能想看看榆树-直播。
它有与elm-reactor相同的选项，但您可以使用自己的index.html。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41333765
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号