Cmd просто перейти на новую веб-страницу в Elm

Есть ли способ просто перейти на новую веб-страницу в Elm, подобно нажатию на ссылку?

У меня есть button которая при нажатии меня хочет перевести на другую веб-страницу. Я знаю, что могу сделать a элементом и использовать CSS для его стилизации как кнопки. Тем не менее, я использую elm-mdl для создания удобных кнопок для создания материалов, и я хотел бы знать, как это сделать независимо.

Я попытался создать GoTo String Msg и Button.onClick(GoTo "newpage.html") нажатием кнопки Button.onClick(GoTo "newpage.html"), но я не знаю, что поставить для Cmd. Я попробовал следующее:

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

Но это только изменяет URL-адрес в адресной строке, пользователь фактически не переходит к новому URL-адресу... Я мог бы использовать порт и написать простой код JavaScript для вызова window.location.href= 'newpage.html', Я просто надеюсь, что там будет простой стандарт Elm.

Ответ 1

То, что будет работать для вашей текущей ситуации, - это использовать порт и заставить JavaScript сделать это за вас. Это не агностик. Причина, по которой я хотел бы предложить сделать это таким образом, заключается в том, что если тег <a> неприемлем, а вы хотите Cmd msg, то это даст вам именно это.

Я включу основной пример, который должен довольно легко соотнести то, что вы делаете.

Вы должны создать модуль, который принимает порты или преобразовывает один из ваших текущих, чтобы использовать их, создавая модуль и добавляя port в начало объявления модуля. Вы также можете просто изменить существующий модуль, чтобы сделать это таким же образом.

Образец модуля для этого был бы

port module OpenWindow exposing (openWindow)

port openWindow : String -> Cmd msg

Теперь у вас есть объявление вашего порта в вашем коде. Вы можете использовать его там, где хотите, обернув его функцией или просто вызовите openWindow из своей функции обновления, когда вы импортируете ее из модуля OpenWindow.

Затем вы должны добавить код JavaScript вашего порта.

В вашем index.js или 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() можно найти здесь.

Ответ 2

Пакет elm-lang/navigation позволяет вам делать это прямо сейчас, при загрузке функции:

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

Ответ 3

Кажется, что elm-history Location.assign достигает перенаправления.

Он "загрузит ресурс по предоставленному URL-адресу или выдаст сообщение об ошибке при сбое". "Это не просто изменение URL-адреса в строке заголовка".

Ответ 4

Это несколько грязный хак, который вы могли бы использовать:
Поставьте однострочный слой javascript в атрибут стиля Elm. Использование 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" ]

Ответ 5

Мы так привыкли к Bootstrap, позволяющему создавать кнопки привязки кнопок, так что вы задаете вопрос.

Я играл с Chrome devtools и завернул кнопку на сайте elm-mdl с помощью привязки, и он, похоже, перенаправлялся по вашему желанию.

Вы также можете изменить название своего вопроса на что-то вроде: "Ссылка на новую веб-страницу с помощью кнопки elm-mdl", поскольку нет ничего, что останавливало ссылки в вязах вообще

Ответ 6

Это работает (в.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...