CmdをElmの新しいWebページに移動するだけです

Question

リンクをクリックするのと同様に、Elmの新しいWebページに移動する方法はありますか？

私はbuttonを持っています。これをクリックすると、別のWebページに移動します。私はそれをa要素にして、それをボタンのようにスタイルするためにCSSを使用することができることを知っています。しかし、材料デザインのライトボタンを作成するのにelm-mdlを使用しています。これをどうしたらよいか知りたいのですが。

私が作成GoTo StringMsgとButton.onClick (GoTo "newpage.html")でクリックボタンの上にそれを発射しようとしましたが、私はCmdのために配置するのか分かりません。私は次のことを試してみました：

GoTo url -> 
    (model, Navigation.newUrl url) 

しかし、唯一のアドレスバーの変更にURLを作ることを、ユーザーが実際に新しいURLに移動していない...私はポートを使用してにいくつかの簡単なJavaScriptコードを書くことができますwindow.location.href = 'newpage.html'と呼んで、これを行うための単純な標準のエルムの方法がほしいと思っています。

Answer 1

あなたの現在の状況には、ポートを使用してJavaScriptを強制するのが良いでしょう。これはライブラリにとらわれないものです。私がこのようにすることを提案したい理由は、<a>タグが受け入れられず、Cmd msgが必要な場合は、正確にそれを与えるでしょう。

私はあなたがやっていることにかなり簡単に関連する基本的な例を紹介します。

モジュールを作成し、モジュール宣言の先頭にportを追加することで、ポートを受け入れるか、現在のポートを使用するモジュールを作成する必要があります。同じように既存のモジュールを変更することもできます。このため

サンプルモジュールは

port module OpenWindow exposing (openWindow) 

port openWindow : String -> Cmd msg 

だろう今、あなたはあなたのコード内で使用するポート宣言を持っています。ファンクションでラップすることで、必要な場所で使用することができます。また、モジュールOpenWindowからインポートするときに、更新機能からopenWindowを呼び出すこともできます。

次に、ポートのJavaScriptコードを追加する必要があります。あなたはいつも

var Elm = require('../Main'); 
var node = document.getElementById('main'); 
var app = Elm.Main.embed(node); 

またはあなたがそれを行うが、単にあなただけのようなコードで、あなたの元の例にこれを追加します

app.ports.openWindow.subscribe(function(newSite) { 
    window.open(newSite); 
}); 

追加定義し、あなたのindex.jsたり<script>タグで

GoTo url -> 
    (model, openWindow "newpage.html") 

個人的には私はお勧めしません通常これが実際にa [] []ステートメントが機能するなら、これが実際に最良の方法ではないので、これを頻繁に行うこと。

もっと適切には、アンカータグをボタンに追加して、そのように参照することができます。

注：window.open（）関数の詳細については、hereを参照してください。

Answer 2

私たちは、アンカーのボタンリンクのスタイリングを可能にするブートストラップにとても慣れています。

私はChrome devtoolsで遊んで、elm-mdlサイトのボタンをアンカーリンクで囲み、必要に応じてリダイレクトしたようです。

あなたはまた、のようなものにあなたの質問のタイトルを変更したい場合があります - ELM-MDLボタンから新しいWebページへのリンク - ニレのリンクを止めるものは何も一般

Answer 3

ではありませんようにelm-historyのLocation.assignのように思えますリダイレクトを実現します。

「提供されたURLでリソースをロードするか、エラー時にエラーメッセージを表示します」。 "単にタイトルバーのURLを変更するだけではありません"。

Answer 4

は（0.18で）に動作しますが、それはとてもきれいではありません。この：

はあなたのELM-のパッケージに追加

var _user$project$Native_Navigation = function() { 

function setLocation(n) 
{ 
    document.location.href = n; 
} 

return { 
    setLocation: setLocation, 
}; 

}(); 

ネイティブ/ Navigation.jsと呼ばれるプロジェクト内のファイルを作成します.json：あなたのコードで

"native-modules": true, 

：

import Native.Navigation 

012あなたの update機能から

と返信Native.Navigation.setLocation "/wherever"を返します。

Javascript関数は実際にはElmコールバックとして動作しませんが、ページから離れすぎても問題はないはずです。 これは正しく公開されたElmモジュールとして動作すると思います...

Answer 5

これは多少汚れたハックです：
Elmスタイルの属性に1行のjavascriptを指定します。ライブラリHtml.Attributesのattributeを使用してください。

あなたがリダイレクトを行い、独自のヘルパー作ることができます：

あなたは、このような任意の要素に追加することができます

redirectTo : String -> Attribute msg 
redirectTo destinationUrl = 
    attribute 
    "onclick" 
    ("window.location.href = ' ++ destinationURL ++ "'") 

を：

button 
    [ class "mdl-button", redirectTo "https://google.com" ] 
    [ text "Click to leave" ] 

Answer 6

パッケージelm-lang/navigationは、あなたがして、これらの日に直接これを行うことができます機能load：

GoTo url -> 
    (model, Navigation.load url)