Crestron ch5嵌套列表按钮点击索引识别最佳实践咨询

适配CH5的嵌套列表索引获取最佳实践 #

优先使用CH5原生能力实现，稳定性最高，符合官方开发规范。

方案1：CH5原生实现（无需额外JS逻辑，最推荐） #

CH5的模板变量支持作用域继承，内层模板可以直接访问外层列表定义的indexid变量，你可以直接将索引注入到按钮的属性或CH5事件中：

1. 修改模板内的按钮配置

<template id="template-0">
    <!-- 方式A：用CH5原生信号绑定，直接触发对应索引的控制信号，无需写JS -->
    <button id="post-1" sendEventOnClick="btn_click_{{idy}}_{{idx}}">Item 1</button>
    <!-- 方式B：给按钮加自定义数据属性，供JS读取 -->
    <!-- <button id="post-1" data-row="{{idy}}" data-col="{{idx}}" class="list-btn">Item 1</button> -->
</template>

<template id="template-1">
    <button id="post-2" sendEventOnClick="btn_click_{{idy}}_{{idx}}">Item 2</button>
</template>

如果选择方式B，只需要加一段全局事件委托的JS即可拿到组合索引：

document.addEventListener('click', e => {
  if (e.target.classList.contains('list-btn')) {
    const combinedIndex = `${e.target.dataset.row}-${e.target.dataset.col}`
    // 后续业务逻辑
    console.log('组合索引：', combinedIndex)
  }
})

方案2：通用JS兼容方案（无需修改模板） #

如果不想改动现有模板代码，可以通过DOM遍历获取CH5列表渲染时自动生成的data-index属性来计算索引：

document.addEventListener('click', e => {
  const targetBtn = e.target.closest('button')
  if (!targetBtn) return
  // 获取纵向父列表的行索引（idy对应值）
  const verticalRow = targetBtn.closest('.verticalList ch5-list-item')
  const rowIndex = verticalRow?.dataset.index
  // 获取横向子列表的列索引（idx对应值）
  const horizontalCol = targetBtn.closest('.horizontalList ch5-list-item')
  const colIndex = horizontalCol?.dataset.index

  if (rowIndex !== undefined && colIndex !== undefined) {
    const combinedIndex = `${rowIndex}-${colIndex}`
    // 后续业务逻辑
    console.log('组合索引：', combinedIndex)
  }
})

开发注意事项 #

• 不要给动态生成的按钮单独绑定事件，CH5列表项会随渲染销毁重建，单独绑定容易造成内存泄漏，使用事件委托绑定到上层静态节点（如document、固定的外层容器）是最优选择
• CH5的indexid默认从0开始计数，完全匹配你需要的索引规则，无需额外做数值偏移
• 如果后续增加嵌套层级，只需要按照相同逻辑新增对应层级的变量注入或DOM查找规则即可，扩展成本很低

内容的提问来源于stack exchange，提问作者mellows