自定义元素

在最近的页面中，我们了解了 (1) 如何从 JavaScript 启动 Elm 程序，(2) 如何初始化时传入数据作为标志，以及 (3) 如何通过端口在 Elm 和 JS 之间发送消息。但在座的朋友们猜猜看？还有另外一种方法可用于互操作！

似乎浏览器越来越支持 自定义元素，这对于在 Elm 程序中嵌入 JS 非常有帮助。

这里是一个 最小示例，演示如何使用自定义元素来进行一些本地化和国际化。

创建自定义元素

假设我们想对日期进行本地化，但在 Elm 核心包中尚未实现。也许你想编写一个本地化日期的函数

//
//   localizeDate('sr-RS', 12, 5) === "петак, 1. јун 2012."
//   localizeDate('en-GB', 12, 5) === "Friday, 1 June 2012"
//   localizeDate('en-US', 12, 5) === "Friday, June 1, 2012"
//
function localizeDate(lang, year, month)
{
    const dateTimeFormat = new Intl.DateTimeFormat(lang, {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });

    return dateTimeFormat.format(new Date(year, month));
}

但在 Elm 中我们该如何使用它呢？新的浏览器允许你像这样创建新类型的 DOM 节点

//
//   <intl-date lang="sr-RS" year="2012" month="5">
//   <intl-date lang="en-GB" year="2012" month="5">
//   <intl-date lang="en-US" year="2012" month="5">
//
customElements.define('intl-date',
    class extends HTMLElement {
        // things required by Custom Elements
        constructor() { super(); }
        connectedCallback() { this.setTextContent(); }
        attributeChangedCallback() { this.setTextContent(); }
        static get observedAttributes() { return ['lang','year','month']; }

        // Our function to set the textContent based on attributes.
        setTextContent()
        {
            const lang = this.getAttribute('lang');
            const year = this.getAttribute('year');
            const month = this.getAttribute('month');
            this.textContent = localizeDate(lang, year, month);
        }
    }
);

此处最重要的部分是 attributeChangedCallback 和 observedAttributes。你需要类似这样的逻辑来检测对所关注属性的更改。

在初始化 Elm 代码之前加载它，这样你便可以像这样在 Elm 中编写代码

import Html exposing (Html, node)
import Html.Attributes (attribute)

viewDate : String -> Int -> Int -> Html msg
viewDate lang year month =
  node "intl-date"
    [ attribute "lang" lang
    , attribute "year" (String.fromInt year)
    , attribute "month" (String.fromInt month)
    ]
    []

现在，可以在 view 中访问此类本地化信息时调用 viewDate。

你可以在 此处查看此示例的完整版本。

更多信息

Luke 在使用自定义元素方面拥有更丰富的经验，我认为他关于 Elm Europe 的讨论是一个很好的介绍！

有关自定义元素的文档可能有点让人困惑，但我希望这足以让人们开始为 Intl 嵌入简单的逻辑，甚至嵌入大型 React 窗口小部件，假如它们对于你的项目而言似乎是正确的选择。