Surface
componentはモジュールとして定義
components, propertiesがコンパイル時にチェックされる
Vue.jsインスパイアのテンプレート言語がsigil ~Hで使える code:例.ex
defmodule Item do
use Surface.Component
prop content, :string, required: true
def render(assigns) do
~H"""
<li>{{ @content }}</li>
"""
end
end
defmodule ItemList do
use Surface.LiveComponent
def mount(socket) do
{:ok, assign(socket, items: [])}
end
def render(assigns) do
~H"""
<div>
<ol>
<Item :for={{ item <- @items }} content={{ item }}/>
</ol>
<button :on-click="add">Add</button>
</div>
"""
end
def handle_event("add", _, socket) do
end
end
リンク
言及