在Mithril中获取HTML标签的结节性

Question

有没有一种方法可以在Mithril中拥有HTML标签的结节性？我需要获得块的宽度。在香草JS上这样的东西：

const blocks = Array.from(document.querySelectorAll('.blocks'));

const styles = blocks
  .map((item) => item.getBoundingClientRect())
  .map((item) => item.width);

const widthOfTheBlocks = styles.reduce((acc, curr) => acc + curr, 0) + 'px';

Answer 1

对于典型的DOM脚本，DOM元素是预先存在的，您需要确保它们具有可识别的选择器（在这种情况下为 blocks 类），然后在其他地方使用该选择器获得Javascript用 document.queryselectorall 引用它们。

但是使用Mithril，您正在声明并引用同一位置的DOM元素，因此您不需要以下任何一种方法：而是附加

生命周期方法公开a vnode 实体：这包含一个 dom 属性，该属性暴露了渲染的dom元素。

在组件中保存参考的基本机制如下：

function MyComponent(){   // The component to contain the logic
  let dom                 // The variable to store our DOM reference

  return {
    view : () => 
      m('.MyElement', {   // The virtual DOM element
        oncreate(vnode){  // The `oncreate` lifecycle method to access the `vnode`
          dom = vnode.dom // Save the dom reference to our variable
        }
      })
  }
}

下面，我写了一个小的沙盒演示，该演示使用您的宽度计算脚本在稍微复杂的情况下：这里有一个可变数量的块，这些块已添加到和随着时间的流逝而删除；我们声明A 要存储它们，对于每个项目，我们将 ongreate 方法添加将其添加到集合中，然后将 onremove 添加到 >删除 it。我已经使用 dom 参考；后来，我们使用 array.from 提取 width 。

function Blocks(){
  const blocks = new Set

  return {
    view: ({attrs: {count}}) => [
      m('.container',
        Array.from({length: count}, (_, index) => 
          m('.block', {
            oncreate({dom}){
              blocks.add(dom)
            },

            onremove({dom}){
              blocks.delete(dom)
            },
          }, index + 1)
        ),
      ),

      m('button', {
        onclick(){
          const styles = Array.from(
            blocks,
            (item) => item.getBoundingClientRect().width
          )

          const widthOfTheBlocks = styles.reduce((acc, curr) => acc + curr, 0) + 'px';

          alert(widthOfTheBlocks)
        }
      }, 'Alert width'),
    ]
  }
}

m.mount(document.body, function App(){
  let count = 1

  return {
    view: () => [
      m('h1', 'Width reader'),

      m('label', 
        'Number of blocks: ',

        m('input[type=number][min=0][max=9][size=4]', {
          value: count,
          oninput(e){
            count = e.target.value
          },
        }),
      ),

      m(Blocks, {count}),
    ]
  }
})

.container {
  display: flex;
  margin: 1em 0;
}

.block {
  flex: 0 0 25%;
  padding: 1em;
  border: 1px solid;
}

<script src="https://unpkg.com/mithril/mithril.js"></script>