fragment(attrs, children)

Description

フラグメントvnodeにライフサイクルメソッドを追加することを可能にします。

var groupVisible = true;
var log = function () {
  console.log('group is now visible');
};

m('ul', [
  m('li', 'child 1'),
  m('li', 'child 2'),
  groupVisible
    ? m.fragment({ oninit: log }, [
        // 2つの要素からなるフラグメント
        m('li', 'child 3'),
        m('li', 'child 4'),
      ])
    : null,
]);

Signature

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

vnode = m.fragment(attrs, children)

引数	型	必須	説明
attrs	Object	任意	HTML属性または要素のプロパティ
children	Array<Vnode>|String|Number|Boolean	任意	子vnode。スプラット引数形式で指定可能。
戻り値	Vnode		フラグメントvnode

シグネチャの読み方

How it works

m.fragment()は、属性を持つフラグメントvnodeを作成します。keyやライフサイクルメソッドを扱う高度なユースケースに適しています。

フラグメントvnodeは、DOM要素のリストを表現します。単一のDOM要素を表し、キー処理が不要な通常の要素vnodeが必要な場合は、代わりにm()を使用してください。

通常、ノードのリストを表現するには、単純な配列やスプレッド構文を使用できます。

var groupVisible = true;

m(
  'ul',
  m('li', 'child 1'),
  m('li', 'child 2'),
  groupVisible
    ? [
        // 2つの要素からなるフラグメント
        m('li', 'child 3'),
        m('li', 'child 4'),
      ]
    : null
);

ただし、JavaScriptの配列では、キーの設定やライフサイクルメソッドの保持ができません。解決策の一つとして、keyやライフサイクルメソッドを保持するためにラッパー要素を作成する方法がありますが、(例えば複雑なテーブル構造などでは)余分な要素を追加したくない場合があります。そのような場合に、フラグメントvnodeを使用できます。

vnodeオブジェクトを手動で作成するよりもm.fragmentを使用することには、いくつかの利点があります。m.fragmentは単相オブジェクトを生成するため、動的にオブジェクトを生成するよりもパフォーマンスの面で有利です。さらに、m.fragmentを使用することで、他の開発者が意図を理解しやすくなり、vnodeオブジェクト自体ではなくattrsオブジェクトに誤って属性を設定してしまう可能性を減らすことができます。