Cmd只需转到Elm的新网页

Question

有没有办法简单地转到榆树的新网页,类似于点击链接？

我有一个button可以在点击时,我想将用户带到另一个网页.我知道我可以制作一个a元素并使用CSS来设置它像按钮一样.但是,我正在使用elm-mdl创建材质设计精简按钮,我想知道如何做到这一点,无论如何.

我已经尝试创建一个GoTo String Msg并点击按钮点击Button.onClick (GoTo "newpage.html"),但我不知道该放什么Cmd.我尝试了以下方法:

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

但这只会使地址栏中的URL发生变化,用户实际上并未转到新的URL ...我可以使用端口并编写一些简单的JavaScript代码来调用window.location.href = 'newpage.html',我只是希望有一个简单的标准Elm这样做的方式.

Answer 1

对您当前的情况有用的是使用端口并强制JavaScript为您完成.这是图书馆不可知的.我想建议这样做的原因是,如果一个<a>标签是不可接受的,你想要一个Cmd msg,那么这将给你这个.

我将包括一个基本的例子,它应该很容易与你正在做的事情相关联.

您应该通过创建模块并添加port到模块声明的开头来创建一个接受端口或转换当前端口的模块以使用它们.您也可以修改现有模块以相同的方式执行此操作.

用于此的示例模块将是

port module OpenWindow exposing (openWindow)

port openWindow : String -> Cmd msg

现在您在代码中有了端口声明.您可以通过将其包装在函数中来将其用于所需的位置,或者只需openWindow从模块OpenWindow导入时从更新函数调用即可.

接下来,您应该添加端口JavaScript代码.

在您index.js或您的<script>标签中,您可以定义通常的标签

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

或者你这样做,只需添加

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

您只需通过代码将其添加到原始示例中即可

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

就个人而言,我不建议经常这样做,因为如果通常一个a [] []声明可行,这不是真正的最佳方式.

您可以更正确地将锚标记添加到按钮并以此方式引用它.

注意:有关window.open()函数的其他信息,请参见此处.

Answer 2

elm-lang/navigation如今，包可以让您使用load函数直接执行此操作：

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