如何在Mithril中遍历字符串列表并创建带复选框的下拉菜单

嘿，刚上手Mithril的时候确实容易碰到这类视图渲染的小困惑，别担心，咱们一步步来实现你想要的带复选框的下拉菜单～

首先，咱们先明确核心需求：遍历filterOptions字符串数组，生成带复选框的下拉选项，同时跟踪选中状态。下面是完整的实现方案：

1. 完整代码示例 #

首先补全你的DefaultListView组件，同时包含状态维护和视图渲染逻辑：

// 假设父控制器（parentCtrl）的定义，用来共享选中状态
const ParentCtrl = function() {
  // 初始化选中的筛选选项数组
  this.selectedFilters = [];
  this.isDropdownOpen = false; // 控制下拉菜单显示/隐藏
};

const DefaultListView = {
  view(ctrl, args) {
    const parentCtrl = args.parentCtrl;
    const attr = args.attr;
    const cssClass = args.cssClass;
    const filterOptions = ['Pending', 'Paid', 'Rejected'];

    // 切换选项选中状态的工具函数
    const toggleFilter = (option) => {
      const optionIndex = parentCtrl.selectedFilters.indexOf(option);
      if (optionIndex === -1) {
        // 未选中则添加
        parentCtrl.selectedFilters.push(option);
      } else {
        // 已选中则移除
        parentCtrl.selectedFilters.splice(optionIndex, 1);
      }
      // Mithril会自动检测状态变化并更新视图，特殊场景下可手动调用m.redraw()
    };

    return m(`div.${cssClass}`, attr, [
      // 下拉菜单触发按钮（自定义下拉容器）
      m('button.filter-trigger', {
        onclick: () => parentCtrl.isDropdownOpen = !parentCtrl.isDropdownOpen
      }, '筛选状态'),
      // 下拉菜单容器，通过状态控制显示/隐藏
      m('div.filter-dropdown', {
        style: { display: parentCtrl.isDropdownOpen ? 'block' : 'none' }
      }, filterOptions.map(option => 
        m('div.filter-option', [
          m('input', {
            type: 'checkbox',
            id: `filter-${option.toLowerCase()}`,
            // 绑定复选框选中状态到父控制器的数组
            checked: parentCtrl.selectedFilters.includes(option),
            // 勾选时触发状态更新
            onchange: () => toggleFilter(option)
          }),
          m('label', { for: `filter-${option.toLowerCase()}` }, option)
        ])
      )),
      // 可选：实时显示已选中的选项
      m('div.selected-info', `当前选中：${parentCtrl.selectedFilters.join(', ') || '无'}`)
    ]);
  }
};

2. 关键逻辑解释 #

• 状态维护：用parentCtrl.selectedFilters数组跟踪选中的选项，这样状态可以和父组件共享，方便后续业务逻辑使用选中值；如果不需要共享状态，也可以在DefaultListView自己的控制器里维护这个数组。
• 列表遍历渲染：通过filterOptions.map()将每个字符串转换成带复选框的DOM元素，这是Mithril中处理列表渲染的标准方式。
• 双向状态绑定：复选框的checked属性绑定到parentCtrl.selectedFilters.includes(option)，确保视图始终和状态同步。
• 事件处理：onchange事件触发toggleFilter函数，更新选中状态数组，Mithril会自动触发视图重绘。

3. 可选优化点 #

• 样式控制：可以添加CSS来美化下拉菜单，比如设置默认隐藏、hover样式等，让交互更自然。
• 独立状态管理：如果不需要和父组件共享状态，可在组件内部初始化状态：

  const DefaultListView = {
    oninit(ctrl) {
      ctrl.selectedFilters = [];
      ctrl.isDropdownOpen = false;
    },
    view(ctrl, args) {
      // 后续逻辑替换为ctrl.selectedFilters和ctrl.isDropdownOpen即可
    }
  };
  

这样应该就能完美实现你想要的功能啦，如果还有细节需要调整，随时根据业务需求修改就行～

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