Mithril fragment(attrs, children)

fragment(attrs, children)

描述

可以在 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}, [
        // a fragment containing two elements
        m("li", "child 3"),
        m("li", "child 4"),
    ]) : null
])

签名

生成一个 vnode 片段

vnode = m.fragment(attrs, children)
参数 类型 是否必须 描述
attrs Object 属性映射
children Array|String|Number|Boolean vnode 数组
返回 Vnode vnode 片段

工作原理

m.fragment() 创建一个带属性的 vnode 片段。用于涉及 key生命周期方法的高级用法的场合。

vnode 片段表示 DOM 元素列表。如果你想要只代表一个 DOM 元素的常规 vnode,应该使用 m()

通常,可以使用简单的数组表示节点列表:

var groupVisible = true

m("ul", [
    m("li", "child 1"),
    m("li", "child 2"),
    groupVisible ? [
        // 这个片段包含两个元素
        m("li", "child 3"),
        m("li", "child 4"),
    ] : null
])

但是,JavaScript 数组不能添加 key 或生命周期方法。有个方式是创建一个在数组外包裹一个元素来添加 key 和生命周期方法,但有时添加一个额外的元素是不可取的(例如在复杂的表格结构中),这种情况下,可以使用 vnode 片段。

使用 m.fragment 来代替手写 vnode 对象结构有几个好处:m.fragment 会创建单态对象,这会比动态创建对象有更好的性能。