Elementaryでカスタム属性を使う
サーバーサイド Swift で使えるテンプレートパッケージ Elementary は HTML を厳格に生成するために、属性においてもあらかじめ定義されているメソッドにて指定していく形になる。そのため、定義されていない属性を使うことができなそうにみえる。
例えば、こんな風に属性を定義する。
h1(.class("my-h1-class")) {
"Hello Elementary!"
}上記は h1 要素に class 属性を指定している。Implicit Member Expression を使って書くのが標準的な書き方だ。
そのため、この中に存在しない属性を書くことは工夫が必要そうにみえる。Elementary の HtmlAttributes に関するドキュメントを見てみる。
その中にこういうメソッドがあることが確認できた。
static func custom(name: String, value: String) -> Self {
HTMLAttribute(name: name, value: value)
}custom メソッドに属性名と値を指定することでカスタム属性を定義することができそうだ。例えば x-data 属性に hello という値を指定したい場合は .custom(name: "x-data", value: "hello") という書き方で書くことができる。
ということでこんな感じでカスタム属性を定義できるので、例えば Alpine.js のように独自属性を描く必要があるライブラリを利用する場合は custom メソッドを使うことで対応できそうだ。
import Elementary
import Vapor
import VaporElementary
...
struct ElementaryPage: HTMLDocument {
...
var body: some HTML {
main {
h1(.id("my-h1-id"), .class("my-h1-class"), .custom(name: "x-data", value: "hello")) {
"Hello Elementary!"
}
}
}
}上記のコードを実行させると以下のような HTML Response を得ることができる。
<!DOCTYPE html>
<html>
<head>
<title>Elementary</title>
<meta charset="UTF-8" />
</head>
<body>
<main>
<h1 id="my-h1-id" class="my-h1-class" x-data="hello">
Hello Elementary!
</h1>
</main>
</body>
</html>ElementarySwiftVapor
