fragment(attrs, children)

• コア
  • m
  • m.render
  • m.mount
  • m.route
  • m.request
  • m.jsonp
  • m.parseQueryString
  • m.buildQueryString
  • m.withAttr
  • m.trust
  • m.fragment
    • 説明
    • シグニチャ
    • どのように動作するのか
  • m.redraw
  • m.version
  • Promise
• オプショナル
  • Stream
• ツール
  • Ospec

説明

フラグメントvnodeにライフサイクルメソッドを追加します

var groupVisible = true
var log = function() {
    console.log("グループが表示されました")
}

m("ul", [
    m("li", "子供 1"),
    m("li", "子供 2"),
    groupVisible ?m.fragment({oninit: log}, [
        // フラグメントには2つの要素が含まれる
        子供m("li", "子供 3"),
        m("li", "child 4"),
    ]) : null
])

シグニチャ

vnodeフラグメントを生成します。

vnode = m.fragment(attrs, children)

シグニチャの読み方

どのように動作するのか

m.fragment()は属性付きのフラグメントvnodeを作成します。このメソッドはキーやライフサイクルメソッドなどの高度なユースケースで使います。

フラグメントvnodeはDOM要素のリストを表現します。もし通常の1つのDOM要素を現すエレメントvnodeが必要であれば、このメソッドの代わりにm()を使用してください。

通常であれば、ノードのリストを表現するには、単純に配列を使うことができます:

var groupVisible = true

m("ul", [
    m("li", "子供 1"),
    m("li", "子供 2"),
    groupVisible ?[
        // フラグメントには2つの要素が含まれる
        子供m("li", "子供 3"),
        m("li", "child 4"),
    ] : null
])

しかし、JavaScriptの配列には、キーを関連付けたり、ライフサイクルメソッドを付与することができません。キーやライフサイクルメソッドを管理するラッパー要素を作るのも方法の１つですが、この方法を使うと新しい不要な要素ができてしまい、複雑なテーブル構造などをさらにわかりにくくします。このような時に代わりにフラグメントvnodeが使えます。

vnodeによるオブジェクト構造を自作する代わりにm.fragmentを使用するといくつかのメリットがあります。まず、m.fragmentが作るのは単一構造のオブジェクトであり、動的にオブジェクトを作成するのよりもパフォーマンスが優れています。これに加えて、m.fragmentを使うことで、設計の意図を明確に他の開発者に伝えることができます。そして、attrsのマップ以外に間違ってvnodeオブジェクトの属性を追加してしまうことを減らすことができます。