Question

我正在尝试使用Elm应用程序，我希望通过在div中单击来生成操作，但我希望操作包含点击的坐标。

我可以看到我可以通过以下点击生成操作：

var MyWrapper = (function(){
  var $ = document.querySelector.bind(document);
  var $$ = document.querySelectorAll.bind(document);
  var slice = Array.prototype.slice;
  var selection;

  var that = {
    select: select,
    remove: remove,
    html: html
  };

  function select(selector){
    selection = $(selector);
    return that;
  }

  function remove(){
    selection.parentNode.removeChild(selection);
    return undefined;
  }

  function html(htmlstring){
    if(typeof htmlstring == 'undefined'){
      return selection.innerHTML;
    } else {
      selection.innerHTML = htmlstring;
      return that;
    }
  }

  return that;
}())

但是我看不到如何将映射函数应用于原始点击数据以填充MyAction中的字段

Answer 1

您可以使用Json Decoders从javascript事件对象中提取不同的属性。要将clientX和clientY值作为元组，您可以创建以下解码器：

import Json.Decode as Json exposing ((:=))

eventPos : Json.Decoder (Int, Int)
eventPos =
  Json.object2
    (,)
    ("clientX" := Json.int)
    ("clientY" := Json.int)

为了对这些值执行某些操作，您需要添加一个可以接受元组作为参数的Action：

type Action
  = MyAction
  | DivClicked (Int, Int)

最后，不是使用onClick函数在div上生成事件处理程序属性，而是需要使用on函数，传入Json解码器：

on "click" eventPos (Signal.message address << DivClicked)

以下是包含working example的要点，您可以将其粘贴到http://elm-lang.org/try。

如何将onClick事件中的值映射到Elm中的操作？

1 个答案: