14

有没有办法简单地转到 Elm 中的新网页，类似于单击链接？

我有一个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方法来做到这一点。

4

6 回答 6

6

适合您当前情况的方法是使用端口并强制 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() 函数的更多信息可以在这里找到。

于 2017-01-06T17:40:13.307 回答
5

现在， Packageelm-lang/navigation允许您直接使用load函数执行此操作：

GoTo url ->
    ( model, Navigation.load url )
于 2018-01-10T17:30:17.773 回答
2

似乎elm-historyLocation.assign实现了重定向。

它将“在提供的 URL 处加载资源，或在失败时提供错误消息”。“它不只是改变标题栏中的 URL”。

于 2016-12-05T01:42:01.667 回答
2

您可以使用这个有点肮脏的技巧：
为 Elm 样式属性提供单行 javascript。attribute从Html.Attributes图书馆使用。

您可以制作自己的助手来执行重定向：

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

您可以将其添加到这样的任何元素中：

button 
  [ class "mdl-button", redirectTo "https://google.com" ]
  [ text "Click to leave" ]
于 2017-01-06T18:13:52.987 回答
0

我们已经习惯了 Bootstrap 启用锚的按钮链接样式，所以你的问题是一个很好的问题。

我玩弄了 Chrome 开发工具，并在 elm-mdl 站点上用锚链接包​​装了一个按钮，它似乎可以根据需要重定向。

您可能还想将问题的标题更改为 - 从 elm-mdl 按钮链接到新网页 - 因为一般情况下 elm 中没有什么可以阻止链接

于 2016-12-02T17:54:33.137 回答
0

这有效（在 .18 中），但它不是那么漂亮：

在您的项目中创建一个名为 Native/Navigation.js 的文件

var _user$project$Native_Navigation = function() {

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

return {
    setLocation: setLocation,
};

}();

添加到您的 elm-package.json：

"native-modules": true,

在您的代码中：

import Native.Navigation

并Native.Navigation.setLocation "/wherever"从您的update功能返回。

Javascript 函数的行为确实不像 Elm 回调应该那样，但由于您从页面重定向，所以问题不应该太大。我想这可以作为正确发布的 Elm 模块工作......

于 2016-12-23T22:36:35.453 回答