使用Knockout处理字典数据的实现困惑求助

嘿，刚上手Knockout的时候确实会对字典（对象）类型的数据绑定有点困惑，我来一步步帮你实现你要的效果——把字典的键作为分组标签，每个location生成按钮，鼠标悬停显示对应的date。

第一步：整理ViewModel的数据结构 #

首先，我们可以把你的原始字典数据包装成Knockout的可观测对象，或者更方便的是转换成可观测数组（因为Knockout对数组的foreach绑定更直观）。这里两种方式都给你演示：

方式1：直接使用原始字典对象（包装成observable）

function ViewModel() {
    var self = this;
    // 原始字典数据，包装成可观测对象
    self.groups = ko.observable({
        'Group 1': [
            { location: 'Orlando', date: '07/10/2018' },
            { location: 'Miami', date: '08/22/2018' }
        ],
        'Group 2': [
            { location: 'Tampa', date: '09/10/2018' }
        ]
    });
    
    // 辅助函数：获取字典的所有键，用于遍历
    self.getGroupKeys = function() {
        return Object.keys(self.groups());
    };
}

ko.applyBindings(new ViewModel());

方式2：转换成分组数组（更推荐，视图绑定更清晰）

function ViewModel() {
    var self = this;
    // 先把字典转成数组，每个元素包含组名和对应项目
    self.groupList = ko.observableArray([
        {
            name: 'Group 1',
            items: [
                { location: 'Orlando', date: '07/10/2018' },
                { location: 'Miami', date: '08/22/2018' }
            ]
        },
        {
            name: 'Group 2',
            items: [
                { location: 'Tampa', date: '09/10/2018' }
            ]
        }
    ]);
}

ko.applyBindings(new ViewModel());

第二步：编写HTML视图绑定 #

两种数据结构对应的视图写法如下，选你觉得顺手的就行：

对应方式1的视图（直接遍历字典键）

<div data-bind="foreach: getGroupKeys()">
    <!-- 分组标签 -->
    <h3 data-bind="text: $data"></h3>
    <!-- 遍历该分组下的所有项目，生成按钮 -->
    <div data-bind="foreach: groups()[$data]">
        <button 
            data-bind="text: location, title: date"
            style="margin: 5px;">
        </button>
    </div>
</div>

对应方式2的视图（遍历分组数组，更直观）

<div data-bind="foreach: groupList">
    <!-- 分组标签 -->
    <h3 data-bind="text: name"></h3>
    <!-- 遍历该分组下的项目 -->
    <div data-bind="foreach: items">
        <button 
            data-bind="text: location, title: date"
            style="margin: 5px;">
        </button>
    </div>
</div>

关键点解释 #

• title绑定：这是最简单的实现悬停显示date的方式，浏览器会自动处理鼠标悬停时的提示框。如果你想要自定义样式的悬停提示（比如弹窗），可以用event绑定mouseover和mouseout，配合一个可观测变量来控制显示：

  // 在ViewModel里加一个可观测变量存储当前悬停的date
  self.hoverDate = ko.observable('');
  
  // 悬停事件处理函数
  self.showDate = function(item) {
      self.hoverDate(item.date);
  };
  
  self.hideDate = function() {
      self.hoverDate('');
  };
  

  然后视图里：

  <button 
      data-bind="text: location, event: { mouseover: showDate, mouseout: hideDate }"
      style="margin: 5px;">
  </button>
  <span data-bind="text: hoverDate, visible: hoverDate() !== ''" style="margin-left: 10px; color: #666;"></span>
  

• 可观测性：如果你的字典数据后续会动态变化（比如添加/删除分组或项目），一定要用ko.observable或ko.observableArray包装，这样Knockout才能自动更新视图。

这样就能完美实现你要的效果啦，试试上面的代码，有问题随时问！

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