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