getElementById в Purescript

Question

Я новичок в Purescript, так что это может быть наивный вопрос.

Я хочу написать функцию Purescript, которая считывает ввод из HTML элементов ввода в браузере и записывает некоторый вывод в другой HTML элемент ввода.

С обычным Javascript это так же просто, как document.getElementById('output').value = myFun(document.getElementById('input'));. Как мне это сделать, используя только Purescript?

Answer 1

РЕДАКТИРОВАТЬ:

Я заметил, что мой ответ не соответствует требованиям - я устанавливаю только значение элемента. Если я найду больше времени, я, вероятно, добавлю также чтение из части значения элемента, но вы сможете догадаться, как это сделать, из уже предоставленных подсказок: -)

В общем, при использовании PureScript вы хотите использовать несколько высоких структура уровня для управления DOM, например: halogen, react-basi c, concur, spork, flare, hedwig, flame (наверняка я пропустил некоторые другие - извините за это).

Но если вы действительно хотите изменить DOM вручную, пожалуйста, не удивляйтесь, что это не так приятно, как в императивном JavaScript. Это сделано специально - PureScript имеет возможность отделять эффекты от чистых функций, и здесь мы должны работать с Effect на каждом этапе. С другой стороны, это дает нам уникальную возможность рассуждать о коде и быть уверенным, где могут возникнуть побочные эффекты и какие части нашей программы являются чистыми.

Итак, давайте использовать низкий уровень purescript -web- html. Эта библиотека является низкоуровневой, но предоставляет строгие типы вокруг DOM API, поэтому, как я уже сказал, для нее требуется довольно много ручной передачи значений:

module Main where

import Prelude

import Data.Maybe (Maybe(..))
import Effect (Effect)
import Web.DOM.Document (toNonElementParentNode)
import Web.DOM.Element (setAttribute)
import Web.DOM.NonElementParentNode (getElementById)
import Web.HTML (window)
import Web.HTML.HTMLDocument (toDocument)
import Web.HTML.Window (document)

main :: Effect Unit
main = do
  w ← window
  d ← document w
  maybeElement ← getElementById "test-input" $ toNonElementParentNode $ toDocument  d
  case maybeElement of
    Nothing → pure unit
    Just elem → do
      setAttribute "value" "new-value" elem

Это можно написать немного короче, используя безточечный стиль, чтобы избежать промежуточных переменных :

main :: Effect Unit
main = window >>= document >>= toDocument >>> toNonElementParentNode >>> getElementById "test-input" >>= case _ of
  Nothing → pure unit
  Just elem → setAttribute "value" "new-value" elem

Прямые манипуляции с DOM, вероятно, не лучший способ начать создание более крупного проекта или начать приключение с этим действительно замечательным языком. Зато время от времени может пригодиться; -)

Answer 2

Я использовал функцию интерфейса внешних функций (FFI) Purescript следующим образом.

Определите свой модуль Purescript с помощью импорта сторонних функций, которые вы хотите использовать. Здесь мы импортировали две функции.

-- Main.purs
foreign import getElementById :: String -> String
foreign import setElementById :: String -> String -> Effect Unit 

Теперь создайте файл Javascript с тем же именем, но с расширением .js. Отсюда мы экспортируем JS функций для использования в Purescript.

// Main.js
"use strict";

exports.getElementById = function(id) {
    return document.getElementById(id).value;
};

exports.setElementById = function(id) {
    return function(value) {
    document.getElementById(id).value = value;
    };
};

Теперь мы можем вызывать функции getElementById и setElementById в наших файлах Purescript.