Last active
April 2, 2017 07:03
-
-
Save giisyu/fcf5bde32368fb307bbc22291fa2b46e to your computer and use it in GitHub Desktop.
ElmのPortでJSを使う。 ref: http://qiita.com/jooex/items/5ff2d3b86563cf5dbd84
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| port hello : String -> Cmd msg | |
| port jsHello : (String -> msg) -> Sub msg |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const elm = document.getElementById('elm'); | |
| const app = Elm.Test.embed(elm); //Elmアプリケーションを起動 | |
| //ElmからJSへはsubscribe | |
| app.ports.hello.subscribe(function(fromElm) { | |
| console.log(fromElm); | |
| //JSからElmへはsend | |
| app.ports.jsHello.send("Hi!"); | |
| }); | |
| //JSからElmへsend | |
| app.ports.jsHello.send("Elm! hellooooo"); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| app.ports.jsHello.send("hellooooo"); //Elmへ送る |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(スクロール対象のセレクタ).animate({"scrollTop": $(スクロール対象のセレクタ)[0].scrollHeight}, スクロール時間); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| port scrollDown : () -> Cmd msg | |
| update msg model = | |
| ... -> ... ! [scrollDown ()] | |
| consoleView = | |
| div [id "console"] [ ...] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const app = Elm.Main.embed(...); | |
| app.ports.scrollDown.subscribe((_) => { | |
| $("#console").animate({"scrollTop": $("#console")[0].scrollHeight}, 5); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const App = Elm.Main.embed(document.getElementById("main")); | |
| document.getElementById('hoge').addEventListener("pointerdown" , (event) => { | |
| console.log(event); | |
| }); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| setTimeout(function () { | |
| document.getElementById('hoge').addEventListener("pointerdown" , (event) => { | |
| console.log(event); | |
| }); | |
| }, 0); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| port module Test exposing (..) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| port 関数名 : 送る型 -> Cmd msg |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| port hello : String -> Cmd msg |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| init = "" ! [hello "Hello!JS!"] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var elm = document.getElementById('elm'); | |
| var app = Elm.Test.embed(elm); | |
| //Elmから受け取る! | |
| app.ports.hello.subscribe(function(str) { | |
| console.log(str); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| port 関数名 : (JSからやってくる型-> msg) -> Sub msg |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| port jsHello : (String -> msg) -> Sub msg |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| type Msg = GetHello Strign --Msgの定義 | |
| port jsHello : (String -> msg) -> Sub msg --JS -> Elm のport | |
| main = program {... , subscriptions = subscriptions} --subscriptions関数に使う。 | |
| subscriptions : Model -> Sub Msg | |
| subscriptions model = jsHello GetHello --例。 | |
| update msg model = | |
| case msg of | |
| GetHello str -> ... --JSからの値はMsgになる。 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment