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

Question

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

у меня есть button что при нажатии я хочу перевести пользователя на другую веб-страницу. Я знаю, что могу сделать это 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-код.

В вашем 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 )

Answer 3

Похоже на историю вязаLocation.assign достигает перенаправления.

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

Answer 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" ]

Answer 5

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

Я поиграл с Chrome devtools и обернул кнопку на сайте elm-mdl якорной ссылкой, и она, казалось, перенаправляла, как вы хотите.

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

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